Delay YouTube autoplay with 20 seconds

Question

Is it possible to delay the autoplay of an iframe embeded YouTube player?

This is the the embed code I have:

<iframe width="560" height="315" src="https://www.youtube.com/embed/iejOAPyooXs?wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>

possible duplicate of [Youtube delay auto start video](http://stackoverflow.com/q/8669702/2065237) — Sildoreth, Mar 11 '15 at 19:34

yamidemichaos · Answer 1 · 2015-03-11T20:43:46.503

2

Updated my answer to a better one using youtube player API for more option and dynamic output. It has many option to select and you could easily control it using Javascript. I hope this could help. Credits to @wasikuss posted answer.

  // 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: 'iejOAPyooXs'
        }); 
    }

Reference https://developers.google.com/youtube/player_parameters

edited Mar 11 '15 at 20:43

answered Mar 11 '15 at 19:43

yamidemichaos

110
1
10

OK, thanks for the idea, I will actually try both of the solutions, but I'm pretty much sure that this is simpler, after I remake it with JavaScript. – Cozzmy Cosmin Mar 11 '15 at 19:50
No problem. Given that user can chose to play the video or wait it autoplay but it's depends on what you need. Glad to help. :) – yamidemichaos Mar 11 '15 at 19:52
but if user clicks play button himself, then video will be restarted due to `src` change – wasikuss Mar 11 '15 at 19:52
Updated answer, hopefully it could help – yamidemichaos Mar 11 '15 at 20:38

score 1 · Answer 2 · edited May 23 '17 at 12:06

1

You could use JavaScript to facilitate the delay. Initially display just the video's thumbnail on the page. In the JavaScript, wait for 20 seconds and then replace the preview with the video iframe.

This other post describes how to show just the thumbnail: Youtube Video Thumbnail with Youtube API.

edited May 23 '17 at 12:06

Community

1
1

answered Mar 11 '15 at 19:20

Sildoreth

1,883
1
25
38

wasikuss · Answer 3 · 2015-03-11T21:41:04.733

0

Sildoreth's solution has one pitfall: user cannot play video himself. More properly solution is to use YouTube IFrame API ( https://developers.google.com/youtube/iframe_api_reference ). After 20s just check video state ( player.getPlayerState() ) and if it is video cued ( 5 ) call player.playVideo()

JSFiddle

edited Mar 11 '15 at 21:41

answered Mar 11 '15 at 19:50

wasikuss

969
8
13

Delay YouTube autoplay with 20 seconds

3 Answers3