Add autoplay to ytplayer

Question

Add autoplay to ytplayer

4.1k views Asked by user7583366 At 18 February 2017 at 00:00

How do I add autoplay to the code below?

The HTML and JavaScript code below shows a simple example that inserts a YouTube player into the page element that has an id value of ytplayer. The onYouTubePlayerAPIReady() function specified here is called automatically when the IFrame Player API code has loaded. This code does not define any player parameters and also does not define other event handlers.

<div id="ytplayer"></div>

<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
.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: '360',
  width: '640',
  videoId: 'M7lc1UVf-VE'
});
}
</script>

Original Q&A

There are 3 answers

**swapnilsm** · Answer 1 · 2017-06-20 06:39:50

You will have to call playVideo() on onPlayerReady event.

function onPlayerReady(event) {
  event.target.playVideo();
}

Complete code is as follows:

<!DOCTYPE html>
<html>
    <body>
        <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
        <div id="player"></div>

        <script>
         // 2. This code loads the IFrame Player API code asynchronously.
         var tag = document.createElement('script');

         tag.src = "https://www.youtube.com/iframe_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 player;
         function onYouTubeIframeAPIReady() {
             player = new YT.Player('player', {
                 height: '390',
                 width: '640',
                 videoId: 'M7lc1UVf-VE',
                 events: {
                     'onReady': onPlayerReady,
                     'onStateChange': onPlayerStateChange
                 }
             });
         }

         // 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();
         }
        </script>
    </body>
</html>

**Bibhudatta Sahoo** · Answer 2 · 2017-06-20 06:59:55

I already done this before in my project so to do this please follow the steps

step-1

Add the iframe in which our youtube videos is load.Do like this

<iframe width="100%" height="378" id="youtube_url" allowfullscreen="1" class="vjs-default-skin" src="https://www.youtube.com/embed/Rk6_hdRtJOE?wmode=opaque&enablejsapi=1&version=3&autoplay=0&controls=0&playerapiid=youtube_player&rel=0&showinfo=0" frameborder="0">
        </iframe>

Step2

And then add the YouTube iframe API

<script src="https://www.youtube.com/iframe_api"></script>

Step-3

Then use this code to create YouTube API object and use that to cotroller the video like auto play etc.

 var  player = new YT.Player('youtube_videos_url', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }

        });
function onPlayerReady(event) {
player.playVideo();
}

This code will run when our video loaded then player.playVideo(); play you video automatically.

I thing it will help you.

**Ayoub Marouan** · Answer 3 · 2019-06-16 15:14:59

You can use the playerVars, and add the autoplay property and set it to 1

var  player = new YT.Player('youtube_videos_url', {
    playerVars: { 'autoplay': 1 },
});

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

TechQA.

Add autoplay to ytplayer

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in YOUTUBE-API

Related Questions in AUTOPLAY

Related Questions in YTPLAYER

Popular Questions

Popular Tags

Trending Questions