[html] YouTube: How to present embed video with sound muted

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 ?

This question is related to html youtube youtube-iframe-api

The answer is


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>

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...


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>

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"


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


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.

_x000D_
_x000D_
<div id="muteYouTubeVideoPlayer"></div>_x000D_
                            <script async src="https://www.youtube.com/iframe_api"></script>_x000D_
                            <script>_x000D_
                                function onYouTubeIframeAPIReady() {_x000D_
                                    var player;_x000D_
                                    player = new YT.Player('muteYouTubeVideoPlayer', {_x000D_
                                        videoId: 'xCIBR8kpM6Q', // YouTube Video ID_x000D_
                                        width: 1350, // Player width (in px)_x000D_
                                        height: 500, // Player height (in px)_x000D_
                                        playerVars: {_x000D_
                                            autoplay: 1, // Auto-play the video on load_x000D_
                                            controls: 0, // Show pause/play buttons in player_x000D_
                                            showinfo: 0, // Hide the video title_x000D_
                                            modestbranding: 0, // Hide the Youtube Logo_x000D_
                                            loop: 1, // Run the video in a loop_x000D_
                                            fs: 0, // Hide the full screen button_x000D_
                                            cc_load_policy: 0, // Hide closed captions_x000D_
                                            iv_load_policy: 3, // Hide the Video Annotations_x000D_
                                            autohide: 0, // Hide video controls when playing_x000D_
                                            rel: 0 _x000D_
                                        },_x000D_
                                        events: {_x000D_
                                            onReady: function(e) {_x000D_
                                                e.target.setVolume(5);_x000D_
                                            }_x000D_
                                        }_x000D_
                                    });_x000D_
                                }_x000D_
_x000D_
                                // Written by @labnol_x000D_
_x000D_
                            </script>
_x000D_
_x000D_
_x000D_


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>

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

mute=1


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>

<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>

<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>

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to youtube

Youtube - downloading a playlist - youtube-dl YouTube Autoplay not working How to embed new Youtube's live video permanent URL? How do you use youtube-dl to download live streams (that are live)? How can I get the actual video URL of a YouTube live stream? YouTube: How to present embed video with sound muted ffprobe or avprobe not found. Please install one Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://localhost:9000 cast_sender.js error: Failed to load resource: net::ERR_FAILED in Chrome Embed YouTube video - Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

Examples related to youtube-iframe-api

YouTube: How to present embed video with sound muted Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://localhost:9000 How to remove youtube branding after embedding video in web page?