How to Embed YouTube Video With Autoplay & Sound Mute

0
YouTube Video Embed

Have you visited Facebook and Twitter of recent? You must have by now noticed that the embedded videos usually begin to play on their own when you scroll to them without you clicking on the play button. The interesting and most user friendly thing about this feature is that the sounds of the videos are automatically muted to avoid unnecessarily noise pollution. The sounds are made to be enabled manually by the user when he or she dims it safe and necessary. Isn’t this awesome? This is also achievable with YouTube videos that are embedded on a website.

Many of you guys run sites which contains videos from YouTube and up until now still don’t know that it is possible to achieve the same functionality as that which Facebook and Twitter uses (i.e. to make videos on your site play automatically with muted sound). These videos are automatically set to mute such that once the video starts playing with its sound muted, users who want to listen to the sound are given an option to enable it manually. Embedding YouTube videos with this feature is very easy and only requires that you make use of a specific code which is a bit different from the default IFRAME embed code used when embedding YouTube videos on a site.

So to make the YouTube videos you embed in your website autoplay with sound muted when users scroll to it, simply follow the instructions as outlined below.

Embedding a YouTube Video With Autoplay and Mute Feature:

  • Locate the YouTube video you want to embed and copy out its ID. For example, the URL of YouTube videos are usually in the format https://www.youtube.com/watch?v=GUPiMFHbbFU. The ID of the video which has that URL above is the part I highlighted in RED (i.e. GUPiMFHbbFU).
  • Replace the text in RED in the below code snippet with the ID of the YouTube video you want to embed in your site.
 <div id="muteYouTubeVideoPlayer"></div>



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

<script>

 function onYouTubeIframeAPIReady() {

  var player;

  player = new YT.Player('muteYouTubeVideoPlayer', {

    videoId: 'REPLACE_WITH_YOUTUBE_VIDEO_ID', // YouTube Video ID

    width: 560,               // Player width (in px)

    height: 316,              // Player height (in px)

    playerVars: {

      autoplay: 1,        // Auto-play the video on load

      controls: 1,        // Show pause/play buttons in player

      showinfo: 0,        // Hide the video title

      modestbranding: 1,  // Hide the Youtube Logo

      loop: 1,            // Run the video in a loop

      fs: 0,              // Hide the full screen button

      cc_load_policty: 0, // Hide closed captions

      iv_load_policy: 3,  // Hide the Video Annotations

      autohide: 0         // Hide video controls when playing

    },

    events: {

      onReady: function(e) {

        e.target.mute();

      }

    }

  });

 }



 // An Educative Helper tutorial

</script>

 

  • Once the above code snippet has been added to your website with the REPLACE_WITH_YOUTUBE_VIDEO_ID replaced with a valid YouTube video ID, the video will be automatically embedded in your site with an autoplay and muted sound feature.

Customization:

To change the width and height of the YouTube IFRAME, simply change 560 to any size of your choice for the width and change 316 to any size you want for the height.

For other customization options, you can visit YouTube Developer’s Page. Please if this was helpful, do not forget to share with friends by clicking on any of the share buttons below.

LEAVE A REPLY

Please enter your comment!
Please enter your name here