Wednesday, September 28, 2011

[YouTube-API] iFrame API randomly doesn't load videos

I am using the iframe api to embed videos that need to auto switch to html5 for iOS.  I have noticed that on chrome and FF (various versions) the videos will sometimes just not load.  I tried switching to the normal embed JS api version and the videos always loaded, but with the iFrame they sometimes just dont.  Has anyone else experienced this? Here is my code.

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
// 2. This code loads the IFrame Player API code asynchronously.
      /*var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);//*/

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var playerOne;
      var playerTwo;
      var playerThree;
      function onYouTubePlayerAPIReady() {
        playerOne = new YT.Player('videoDivOne', {
          height: '385',
          width: '700',
          videoId: 'KKTpVZyUhCk',
          playerVars: { 'wmode': 'transparent', 'rel': 0, 'version' : '3', 'origin' : 'etstalkhealthcare.org' },
          events: {
            'onStateChange': onPlayerStateChangeOne
          }
        });
        playerTwo = new YT.Player('videoDivTwo', {
          height: '385',
          width: '700',
          videoId: 'Q-4d5gcVSq8',
          playerVars: { 'wmode': 'transparent', 'rel': 0, 'version' : '3', 'origin' : 'letstalkhealthcare.org'  },
          events: {
            'onStateChange': onPlayerStateChangeTwo
          }
        });
        playerThree = new YT.Player('videoDivThree', {
          height: '385',
          width: '700',
          videoId: 'nosxWs_hh_g',
          playerVars: { 'wmode': 'transparent', 'rel': 0, 'version' : '3', 'origin' : 'letstalkhealthcare.org'  },
          events: {
            'onStateChange': onPlayerStateChangeThree
          }
        }); 
      }
      

      // 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.
      function onPlayerStateChangeOne(event) {
        if (event.data == '0') {
          $('.videoDivOneOverlay').show();
          $('#videoDivOne iframe').hide();
        }
      }
      function onPlayerStateChangeTwo(event) {
        if (event.data == '0') {
          $('.videoDivTwoOverlay').show();
          $('#videoDivTwo iframe').hide();
        }
      }
      function onPlayerStateChangeThree(event) {
        if (event.data == '0') {
          $('.videoDivThreeOverlay').show();
          $('#videoDivThree iframe').hide();
        }
      }
      
      function playVideoOne() {
$('#videoDivOne iframe').show();
 playerOne.playVideo();
 $('.videoDivOneOverlay').hide();
}
function playVideoTwo() {
$('#videoDivTwo iframe').show();
 playerTwo.playVideo();
 $('.videoDivTwoOverlay').hide();
}
function playVideoThree() {
$('#videoDivThree iframe').show();
 playerThree.playVideo();
 $('.videoDivThreeOverlay').hide();
}
</script>

Thanks for any help

--
You received this message because you are subscribed to the Google Groups "YouTube APIs Developer Forum" group.
To view this discussion on the web visit https://groups.google.com/d/msg/youtube-api-gdata/-/wO0S050RITQJ.
To post to this group, send email to youtube-api-gdata@googlegroups.com.
To unsubscribe from this group, send email to youtube-api-gdata+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/youtube-api-gdata?hl=en.

No comments:

Post a Comment