Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › Design › jQuery overlay pop-window

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 28, 2016 at 10:50 am #247164
    webtectailors
    Participant

    Is there a jQuery overlay pop-window, to allow YouTube video player to force full screen play but then return to normal screen, after play?

    October 29, 2016 at 7:03 pm #247194
    Shikkediel
    Participant

    This seems to be a way to do it, not a pop-up but a wrapper:

    http://stackoverflow.com/a/26619243/3168107

    Unless of course I misunderstand the question.

    October 29, 2016 at 10:03 pm #247195
    Shikkediel
    Participant

    Here’s an example:

    Link to pen

    October 30, 2016 at 5:40 am #247196
    webtectailors
    Participant

    Thanks Shikkediel this is exactly what I’ve been looking for

    October 30, 2016 at 10:41 am #247207
    Shikkediel
    Participant

    Cheers, it was quite interesting to have a look into the Youtube iframe API. Pretty usable actually. One quick tip because I also came across it… make sure this function does not have another wrapping function around it or else it will not fire:

    function onYouTubeIframeAPIReady() {

  ...
}

    It’s a bit of a dirty approach by them that this has to be kept global…

    As one can see, I also added a check so it will only reinsert the player when the video ends in fullscreen.

    B-)

    Edit – I might create a version that takes care of the above mentioned issue. Seeing some good clues on SO to limit the scope of things (it’s all global now)…

    That went quicker than I thought. Now it has a nice document ready wrapper around it and can be used anywhere on the page without issues. The only global function is onYouTubeIframeAPIReady.

    A looksie for those that are interested

    November 1, 2016 at 11:23 am #247275
    Shikkediel
    Participant

    Oops, I ended up editing out a line and can’t save the pen anymore. That’s why the example above doesn’t seem to be working.

    New fork

    I’ve also added the line below, it will prevent the recommended videos upon ending which looks a bit better on Firefox especially when exiting fullscreen.

    playerVars: {rel: 0}
    November 3, 2016 at 10:46 pm #247438
    Shikkediel
    Participant

    I’m an idiot, that link was fine (and the pen could still be saved) because I forked it to my account.

    X-D

    November 4, 2016 at 8:02 am #247453
    webtec
    Participant

    Thanks again, I tried this code first of all but it didn’t close after it played and kept showing unrelated videos here is the link:

    pop up with video or map

    http://dimsemenov.com/plugins/magnific-popup/

    November 4, 2016 at 12:41 pm #247490
    webtec
    Participant

    I’ve tried the new code but I can’t get the pop window to work properly. How can I get this work?

    November 4, 2016 at 3:19 pm #247503
    Shikkediel
    Participant

    So if I understand correctly, it’s not so much about closing a fullscreen video but more about closing the modal after it has finished?

    A small demo of what you’ve tried so far would be very helpful…

    November 4, 2016 at 3:34 pm #247505
    webtec
    Participant

    Here is the code I used:

    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>Untitled Document</title>
    <script>
    document.getElementById(‘ytPlayer’).innerHTML = document.getElementById(‘codeholder’).innerHTML;
    </script>
    </head>

    [youtube https://www.youtube.com/watch?v=Pf4vesL4Qo0?rel=0&w=640&h=380%5D

    <

    div>

    <

    div>

    <

    div>
    <script type=”text/javascript”>

    document.addEventListener(‘DOMContentLoaded’, function() {

    var gate = window, page = this,
    link = page.createElement(‘script’), video, iframe;

    link.src = ‘https://www.youtube.com/embed/Pf4vesL4Qo0?rel=0/iframe_api&#8217;;
    page.getElementsByTagName(‘head’)[0].appendChild(link);

    gate.onYouTubeIframeAPIReady = makeFrame;

    function makeFrame() {

    if (video) video.destroy();

    video = new YT.Player(‘player’, {
    width: ‘100%’,
    height: ‘100%’,
    videoId: ‘5k_LZbS5oig’,
    events: {
    ‘onStateChange’: phasePulse
    }
    });

    iframe = page.getElementById(‘player’);
    }

    function phasePulse(event) {

    if (event.data) return;

    var style = gate.getComputedStyle(iframe, null),
    range = parseInt(style.getPropertyValue(‘width’)),
    crest = parseInt(style.getPropertyValue(‘height’));

    if (range == gate.innerWidth && crest == gate.innerHeight) makeFrame();
    }
    });

    </script>

    November 4, 2016 at 4:28 pm #247509
    Shikkediel
    Participant

    ?

    Some incomplete HTML, no modal script and the code I posted earlier… that’s not holding any clues I can work with. Please provide a small demo, on Codepen for example, and explain what you’re trying to achieve.

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘Design’ is closed to new topics and replies.