How can I mute an iframe with an embedded youtube video in HTML?

Question

I want to mute the autoplayed youtube video in iframe in background of my homepage.

Searched google for that but couldn't find the solution for it.

Tried <-object->.muted = true; volume='0' and some other solutions found on google for this but none is working for me.

Here is my code :

<iframe id="HomeScreenVideo" width="100%" height="100%" src="https://www.youtube.com/embed/T1RFAujSCJA?vq=hd1080&amp;autoplay=1&amp;hd=1&amp;playlist=T1RFAujSCJA&amp;enablejsapi=1" frameborder="0" allowfullscreen></iframe>

https://stackoverflow.com/questions/24868226/how-do-you-mute-an-embedded-youtube-player — Goombah, Dec 16 '16 at 13:30
https://stackoverflow.com/questions/35044594/youtube-how-to-present-embed-video-with-sound-muted — Goombah, Dec 16 '16 at 13:31
https://stackoverflow.com/questions/8869372/how-do-i-automatically-play-a-youtube-video-iframe-api-muted — Goombah, Dec 16 '16 at 13:31
tried all these solutions but none is working..... as i am new to this can you please help me step by step? — Rushi Oza, Dec 16 '16 at 13:49
I just tried one of the solutions, here's the fiddle: https://jsfiddle.net/BFDKS/1091/ — Goombah, Dec 16 '16 at 15:02

score 0 · Answer 1 · answered Jan 31 '18 at 19:47

Using the youtube api, from the parent page.

   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('video', {
                events: {
                    'onReady': onPlayerReady
                }
            });
        }

        function onPlayerReady() {
            player.playVideo();
            // Mute!
            player.mute();
        }

<iframe id="video" width="100%" height="100%" src="https://www.youtube.com/embed/QH2-TGUlwu4?vq=hd1080&amp;autoplay=1&amp;hd=1&amp;playlist=T1RFAujSCJA&amp;enablejsapi=1" frameborder="0" allowfullscreen></iframe>

Source: https://jsfiddle.net/BFDKS/1091/

score 0 · Answer 2 · answered Feb 01 '18 at 07:23

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-123, the video id is xyz-123. 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();
      }
    }
  });
 }

How can I mute an iframe with an embedded youtube video in HTML?

2 Answers2