How to Adding a YouTube video with sound muted

Submitted by erick on Sat, 08/19/2017 - 19:44

How to Adding a YouTube video with sound muted

It is easy to adding YouTube videos in your website. You grab the default IFRAME embed code, paste it anywhere inside your web page and you’re done. YouTube offers basic customization – you can modify the player dimensions or hide the YouTube branding – but if you would like to exercise more control over the  behavior of the embedded player, YouTube Player API is the way to go.

This tutorial explains how you can adding a YouTube video that will automatically play when the web page is loaded but with muted audio.

For instance, a products website may use short screencasts to highlight features and these videos will autoplay when the page is loaded. The volume is however set to 0 and the user can manually click to un-mute the video. Similarly, if you are using YouTube video backgrounds, it makes more sense to embed muted videos that run in a loop.

This is easy. Go the YouTube video page and note down the ID of the video from the URL. For instance, if the YouTube video link is http://youtube.com/watch?v=xyz-123456, the video id is xyz-123456. Once you have the ID, all you have to do is replace YOUR_VIDEO_ID in the following code with that string.

 

    <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: 'YOUR_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();
          }
        }
      });
     }
     
     // Written by @ericklan
    </script>

 

You can further customize the player by modifying the various player variables as commented in the code. For instance, if you set loop as 1, the video will play in a loop. Set fs to 1 to show the fullscreen button inside the video player. Internally, the player is embedded using the YouTube IFRAME API. When the page is loaded, the onReady event runs that mutes the video.

YouTube Embedded
YouTube Embedded