Javascript – Reinitialize youtube iframe api

javascriptyoutubeyoutube-api

I'm adding my YouTube iframes with ajax (in modal/lightbox layer). One at a time. Since I'm doing this (and it can't be changed) I can't run the youtube api on document ready. The script needs to be appended and run when the iframe exists for it to find the ID of the iframe.

It all works fine with the first iframe. When getting the iframe with ajax I also append the javascript.

BUT: when I close that modal layer (I close it, I don't remove it – for performance reasons) and open another layer with the with a new video I'd like to just run the youtube script again. Right now it doesn't work when adding a second youtube api script.

Note: when I close a modal I pause the video with the api. That only works on the first iframe.

What should I do? Is there a function to run that reinitializes the api?

Thanks for trying to help tsturzl, but that's not working.

I open a modal and load the content (containing the iframe and other element) with ajax. Then I run the youtube API and set the ID to the iframes ID.

When I close the modal I run player.pauseVideo(); and pause the video. The modal is now hidden (not removed, and the video is paused) and the iframe is still in the html and the youtube api has its ID "saved".

Now I want to open another modal with another youtube iframe (this one is also loaded with ajax). I run the api again and try to save that ID so when I close (hide) that modal the new video pauses, but it won't work.

Any idea how to do that?

Note: In these modals the video is shown in one preview div and the user can hide/show the iframe. When they hide it the video should pause. When the iframe is hidden, an image is shown in the preview div.

Best Answer

There doesn't seem to be, however you can reinitialize it yourself. Seeing as you provided no code, I'm going to reference the code on the documents here

To initialize you create "var player;" which is the variable in which you create an instance with the function "onYouTubeIframeAPIReady()". Perhaps you're not recreating the iframe every time you create the modal.

Its possible that the way you're doing modal boxes is by storing the content in a string in javascript. So everytime you close it the div element is gone therefore the youtube API might bug out because of the absents of the element you initialized it to.

My guess is that the iframes should be created and removed(the "player" object that is) every time you open or close the modal.

Unfortunately I cannot be certain, I have no code snippets to base that off of. As you provided little information.

So what I would to is something like this:



      var isReady=0;
      var player;
      function onYouTubeIframeAPIReady() {
        isReady=1;
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
      function onModalOpen(){
        if(isReady==1){
          player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'u1zgFlCw8Aw',
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
          });
        }
      }
      function onModalClose(){
        player=null;
      }

Of course you'll need to create a "player" object for each iframe. You'll also need to call onModalOpen/Close for each player object, which you could pass as an argument to the event handler.

Related Topic