Question

我想在我的主页背景中将iframe中的自动播放的YouTube视频静音。

搜索谷歌，但无法找到解决方案。

尝试＆lt; -object-＆gt; .muted = true; 体积=＆＃39; 0＆＃39; 谷歌为此提供了一些其他解决方案，但没有一个适合我。

这是我的代码：

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

Answer 1

转到YouTube视频页面，然后记下网址中视频的ID。例如，如果YouTube视频链接为http://youtube.com/watch?v=xyz-123，则视频ID为xyz-123。获得ID后，您只需使用该字符串替换以下代码中的YOUR_VIDEO_ID。

<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();
      }
    }
  });
 }

Answer 2

使用youtube api，从父页面。

	  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>

来源：https://jsfiddle.net/BFDKS/1091/

如何在HTML中使用嵌入式YouTube视频静音iframe？

2 个答案: