How to Embed YouTube Video with sound Muted in your website

advertisement

It is easy to embed YouTube video in your website or blog. The YouTube video will automatically play when loaded but with sound muted or no sound. You just have to paste the code in the place where you want and can customize the variety of options provided by YouTube, including not only sound muted YouTube video but also skip full screen option, dimensions and other layout behavior.

Normally when an embedded YouTube video loaded, the video will usually autopaly with sound, although the user can mute and unmute manually but this tutorial will guide you to use the option to automatically load the YouTube video with sound muted.

embed youtube video with sound muted

Read Also: How to Embed Facebook Message Button on Your Website

How to Embed YouTube Video with sound Muted in your website:

The following tutorial will guide you to embed YouTube video that will load automatically.

  1. Go to your desired YouTube video and note down the id of the link from the video in the address bar. For example if the video address is https://www.youtube.com/watch?v=_mEbbT6vsJ0 then the text after ?v= will be the id link ie. in that case it is (copy it)
  2. Now replace YOUR_VIDEO_ID in the code given below with the code copied. In the above example it is _mEbbT6vsJ0
  3. Copy all code and paste it in the place of your website or blog where you want.
  4. That’s all now you can enjoy the embedded YouTube video with no sound.
<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>

You can customize the above code by your will, hope so you have learnt to embed Youtube video with sound muted, do comments with your feed back.

2 Comments

  1. Jayce Ooi says:

    Interesting. Never know this can be done. 😉

Leave a Reply