YouTube: How to present embed video with sound muted

Question

I'm trying to embed a video with the sound muted but I can not figure out how it make it work.

Currently I'm using this but doesn't work:

<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?rel=0&amp;autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>

Any of you knows how can I make this work ?

Devon Yarbrough · Accepted Answer · 2020-09-24T19:43:07.820

130

Updated

Add &mute=1 to the end of your url.

Your new code would be:

<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?rel=0&amp;autoplay=1&mute=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>

edited Sep 24 '20 at 19:43

answered Jan 27 '16 at 18:01

Devon Yarbrough

1,572
1
10
8

6

doesn't work anymore. use youtube api (https://stackoverflow.com/a/41045251/353752) – mwm Jul 05 '17 at 15:49
@FrankConijn, easier solution? the answers are the same, but this one has an example, doesn't matter who is the first, with example things make more easier. – ICG DEVS Sep 24 '19 at 00:54
@ICGDEVS — Your comment doesn't make any sense. Look at the dates of the edits and my comment - under another answer, and saying nothing about 'easier'. – Frank Conijn - Support Ukraine Sep 24 '19 at 21:55
My bad, sorry. anyway your comment before mine is gone so its make more no longer make sense. – ICG DEVS Sep 25 '19 at 00:59

score 106 · Answer 2 · edited May 08 '18 at 22:03

106

For me works using &autoplay=1&mute=1

edited May 08 '18 at 22:03

Gottlieb Notschnabel

9,408
18
74
116

answered Jun 23 '17 at 15:56

Adriana

1,061
2
7
2

It should have been that easy from the beginning. Yeah, that works for me too. – Gerard Reches Jun 26 '17 at 14:40
It's indeed as simple as that: just add `&mute=1`. – Frank Conijn - Support Ukraine Mar 05 '18 at 04:24

score 36 · Answer 3 · edited Dec 08 '16 at 20:03

The accepted answer was not working for me, I followed this tutorial instead with success.

Basically:

<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 also add `mute: 1` as an additional `playerVar` and then the `onReady` event isn't needed. Be sure to add a comma after `autohide: 0` and note that you cannot use `mute: 0` because that would be considered 'spammy'. Also note that once you've explicitly muted a video when you refresh the page it will still be muted. — Simon_Weaver, Jul 20 '17 at 20:15
Does anyone know how to use this method for more than one video on a page? I tried changing the `id` of the `div` in each instance, but only the first video is displayed. All the other videos on the same page are not visible. — ChaosFreak, May 04 '21 at 18:25

score 13 · Answer 4 · edited Sep 14 '19 at 09:06

13

This is easy. Just add mute=1 to the src parameter of iframe.

Example:

<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?controls=0&mute=1&showinfo=0&rel=0&autoplay=1&loop=1&playlist=uNRGWVJ10gQ" frameborder="0" allowfullscreen></iframe>

edited Sep 14 '19 at 09:06

linktoahref

7,812
3
29
51

answered Jun 27 '17 at 04:20

Juan Manuel De Castro

198
1
6

score 4 · Answer 5 · answered Feb 14 '18 at 11:46

4

<iframe  src="https://www.youtube.com/embed/7cjVj1ZyzyE?autoplay=1&loop=1&playlist=7cjVj1ZyzyE&mute=1" frameborder="0"  allowfullscreen></iframe>

mute=1

answered Feb 14 '18 at 11:46

mtngunay

69
1
3

2

Please add some explanation [How to answer](https://stackoverflow.com/help/how-to-answer) – Hani Feb 14 '18 at 12:08

score 2 · Answer 6 · answered Jul 08 '17 at 12:49

2

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ObHKvS2qSp8?list=PLF8tTShmRC6uppiZ_v-Xj-E1EtR3QCTox&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>



<iframe width="560" height="315" src="https://www.youtube.com/embed/ObHKvS2qSp8?list=PLF8tTShmRC6uppiZ_v-Xj-E1EtR3QCTox&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>

answered Jul 08 '17 at 12:49

hassanmen

39
1
1
3

As of 2017, this is correctly working and should be the accepted. – Manuel Di Iorio Sep 01 '17 at 15:09

score 2 · Answer 7 · answered Aug 06 '17 at 15:14

I would like to thank the friend who posted the codes below in this area. I finally solved a problem that I had to deal with all day long.

<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: 'xCIBR8kpM6Q', // YouTube Video ID
                                        width: 1350, // Player width (in px)
                                        height: 500, // Player height (in px)
                                        playerVars: {
                                            autoplay: 1, // Auto-play the video on load
                                            controls: 0, // Show pause/play buttons in player
                                            showinfo: 0, // Hide the video title
                                            modestbranding: 0, // 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
                                            rel: 0 
                                        },
                                        events: {
                                            onReady: function(e) {
                                                e.target.setVolume(5);
                                            }
                                        }
                                    });
                                }

                                // Written by @labnol

                            </script>

score 1 · Answer 8 · answered Dec 21 '16 at 09:23

Source: https://developers.google.com/youtube/iframe_api_reference

   <div id="player"></div>
    <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: '720',
              width: '1280',
              videoId: 'M7lc1UVf-VE',
              playerVars :{'autoplay':1,'loop':1,'playlist':'M7lc1UVf-VE','vq':'hd720'},
              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) {
        //      setTimeout(stopVideo, 6000);
                      done = true;
            }
               event.target.setVolume(0);
          }
    </script>

score 0 · Answer 9 · edited Sep 23 '20 at 00:10

0

Just pass mute=1.

For example:

<iframe id="myVideo" src="https://www.youtube.com/embed/k0DN-BZrM4o?rel=0&amp;autoplay=1;mute=1" width="100%" height="600" frameborder="0" allowfullscreen></iframe>

edited Sep 23 '20 at 00:10

jeremykenedy

4,150
1
17
25

answered Sep 17 '17 at 14:11

Dev

21

score -1 · Answer 10 · answered Aug 03 '17 at 16:40

was also looking for a solution to this but I wasn't including via iframe, mine was linked to images/video.mp4 - found this https://www.w3schools.com/tags/att_video_muted.asp - and I simply added < video controls muted > (CSS/HTML 5 solution), but no JS required for me...

score -3 · Answer 11 · answered Jul 04 '17 at 18:57

-3

<iframe width="560" height="315" src="https://www.youtube.com/embed/ULzr7JsFp0k?list=PLF8tTShmRC6vp9YTjkVdm1qKuTimC6K3e&rel=0&amp;autoplay=1&controls=1&loop=1" rel=0&amp frameborder="0" allowfullscreen></iframe>

answered Jul 04 '17 at 18:57

hassanman

1

2

Please elaborate on how this works and why. Just posting a code snippet is not helpful to newcomers. – herrbischoff Jul 04 '17 at 19:59
This just doesn't do what the question was! – jankal Jul 05 '17 at 20:55

score -5 · Answer 12 · answered Oct 15 '16 at 18:03

-5

Try this

<iframe width="420" height="315" src="http://www.youtube.com/embed/
HeQ39bLsoTI?autoplay=1&cc_load_policy=1" volume="0" frameborder="0"
allowfullscreen></iframe>

don't forget to write volume="0"

answered Oct 15 '16 at 18:03

Ravat Parmar

35
4

YouTube: How to present embed video with sound muted

12 Answers12

Linked

Related