How to Embed a YouTube Video with Sound Muted

H
Published in: Embed - YouTube

It is easy to embed YouTube videos in your website. You just have to copy the IFRAME embed code and paste it anywhere on your web page. YouTube does offer basic customization options - like you can modify the player dimensions or hide the YouTube branding - but if you would like to have more control over the layout or behavior of the embedded player, YouTube Player API is the way to go.

This tutorial explains how you can embed 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 unmute the video. Similarly, if you are using YouTube video backgrounds, it makes more sense to embed muted videos that run in a loop.

Embed YouTube Player with Autoplay and Sound Muted

See the demo page to get an idea of what we are trying to do here. The page loads, the video plays but with the audio slide is all the way down.

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 https://youtube.com/watch?v=xyz, the YouTube video id is xyz. 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_policy: 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 @labnol
</script>

Next place the edited code on your web page and the embedded video would automatically play but the sound is muted.

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-mute-video-embed.png The embedded YouTube video will autoplay, but muted.

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: Embed - YouTube

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
A
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account
G

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube