How to Add YouTube Video with Autoplay in Your Site (100% Working)

In this topic i will explain about how to add youtube video with auto play feature in your blog or site. It really cool and intresting topic, now let's start.



YouTube have many advantage gives to inbuild their video in your site. Already we got an embedded script by using iframe. But, its have no auto play feature, Because they don't need to washout users bandwidth. So, mobile users will not get video auto loaded.

YouTube Embedded Video

Already have explain with YouTube embedded video have used with iFrame. Just, i give the example one;

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEOID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

This the code will give YouTube and that iFrame contains all the code but still not play in auto. So just we need make it an auto play with simple script.

How To Embedded YouTube Video with Auto Play

Therefore you can add video in your blog or site with auto play by using javscript. Such given below also given explanation for how to change made.

Copy the JavaScript code

    <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', {
          videoId: 'xxxxx',
          playerVars: {   
                'autoplay': 1,   
                'rel': 0,
                'showinfo': 0,
                'modestbranding': 1,
                'playsinline': 1,
                'showinfo': 0,
                'rel': 0,
                'controls': 0,
                'color':'white',
                'loop': 1,
                'mute':1,
                // 'origin': 'https://meeranblog24x7.blogspot.com/'
          },
          events: {
            'onReady': onPlayerReady,
            // 'onStateChange': onPlayerStateChange
          }
        });
      }
      function onPlayerReady(event) {
        player.playVideo();
        player.mute();
      }
  var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
    

Change Values in the Code

After copy the code you need to change the xxxx red color code into your Video ID. for the example if your video link is https://youtu.be/PTfI41qLIFk then cut the after slash area PTfI41qLIFk this is an code for you need change it was an your Video ID

YouTube Embedded Video Auto Play Video in 5 seconds

There will be possible to auto playe with 5 seconds or 10 seconds. In this JavaScript code will also gives that on cool action. Just want to make it you change the value in code. That i am explain with example below.

var done = false;

Just Change the value in code false to True and set the seconds by below example

setTimeout(stopVideo, 6000);

In 6000 means 6 seconds the you need change to 10 seconds make it 10000 that's it. You're Video auto play by 10 seconds.



Conclusion :- All about to easily make an youtube video with embedded one using JavaScript. In this method working Perfectly i have also attached demo video by below.