Embed Youtube video with muted Sound

Its Very Easy to Embed Any Youtube Video with Your Website. You tube Also Provide the embed code. You have to only Copy the iframe embed and Paste it as Per Your Website Design.

Youtube also Provide Customization option like a Height, Width, autoplay. If You want more Customization then You can use the Youtube Player API.

This is the tutorial for Beginners to when the Page was loaded then Youtube Video is Start with the Muted Sound. You can Increase Youtube video Sound as per you wish.

Paste the Following Code in HTML for Youtube API

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

Include this Script into your code.

<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: '315',
          width: '560',
          videoId: 'twZggnNbFqo',
          playerVars: {rel: 0,
                autoplay: 1,       
                controls: 0,       
                showinfo: 0,       
                modestbranding: 0,  
                loop: 1,         
                fs: 0,             
                cc_load_policy: 0,
                iv_load_policy: 3,  
                autohide: 0 },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
    
      function onPlayerReady(event) {
       event.target.setVolume(0);
       event.target.playVideo();
      }
     
    
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
 
                  done = true;
        }
           event.target.setVolume(0);
      }
</script>

Now we understand the Following Javascript code step by step.

The First thing is the videoId. If your Youtube video source is the https://www.youtube.com/watch?v=twZggnNbFqo Then Your videoId is the twZggnNbFqo

Coding Explanation
rel: 0 Hide/Show the Related Video
autoplay: 1 Autoplay Video when Page Loaded
controls: 1 Hide/Show the Video Control like a Play/Pause
showinfo: 0 Hide/Show the Video Title
modestbranding: 1 Hide/Show the Youtube Logo
loop: 1 Its use for the repeat Video
fs: 0 Hide/Show Full Screen Button
cc_load_policy: 0 Hide/Show Closed the Captions
iv_load_policy: 3 Hide/Show the Video Annotations

2 thoughts on “Embed Youtube video with muted Sound

Leave a Reply

Your email address will not be published. Required fields are marked *