Youtube delay auto start video

Question

There is anyway to delay the auto start of a youtube video for example:" 20seconds, after page loads?"

Here is the example just with the auto start:

http://jsfiddle.net/qbqEA/

Thanks

Answer 1

I use the following function

jQuery(document).ready(function () {
    var frame = jQuery('.embed-responsive iframe');
    var src = frame.attr('src');
    setTimeout(function(){ frame.attr('src', src+'?autoplay=1'); }, 20000);
});

Answer 2

Using https://developers.google.com/youtube/iframe_api_reference this will add a 10 second delay before the video automatically starts:

<div id="player"></div>

<script>
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    setTimeout(function() {
        event.target.playVideo();
    }, 10000);
  }

  function stopVideo() {
    player.stopVideo();
  }
</script>

Answer 3

The best way to do it is to use YouTube.API with Javascript functionality.

 // Load the IFrame Player API code asynchronously.
    setTimeout(function() {
        player.playVideo();
    }, 20000);
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
    var player;
    function onYouTubePlayerAPIReady() {    
        player = new YT.Player('ytplayer', {
          height: '315',
          width: '560',
          videoId: 'I_V_kIzKKqM'
        }); 
    }

I hope this help

Answer 4

It is not perfect solution but it works,

<iframe class="delayed" width="486" height="273" frameborder="0" data-src="__url__" allowfullscreen=""></iframe>

note that I used data-src instead of 'src'

$(document).ready(function() {
    setTimeout(function() { 
        $('iframe.delayed').attr('src', 
                                     $('iframe.delayed').attr('data-src')); 
    }, 20000);
}

It will load iframe 20 seconds after page loads. see my fork: http://jsfiddle.net/WswGV/

Answer 5

The link to the IFrame YouTube API above is obsolete, I think, but here's one I found today:

https://developers.google.com/youtube/iframe_api_reference

Wish I'd read that a long time ago.

To excerpt from the example there, I would suggest that you detect the player being downloaded and ready, then set a timer for the desired number of seconds (20 in your case, I think), and then play the video.

---v