Youtube API playvideo 功能在 iframe 上不起作用答案

【问题标题】：Youtube API playvideo function not working on iframeYoutube API playvideo 功能在 iframe 上不起作用
【发布时间】：2021-07-13 18:15:14
【问题描述】：

我整天都在寻找解决方案，但我找不到任何解决方案，所以这是我的问题：我正在尝试在我的网站上播放嵌入到另一个 iframe 的 youtube 视频，例如

CMS > youtubeapi.html

CMS：<iframe src="youtubeapi.html" frameborder="0" width="100%" height="1000px"></iframe>

youtubeapi.html

<div class="btn-play" onclick="this.nextSibling.style.display='block'; this.style.display='none';">
    <img src="img/thumbnail.png"/>
</div>
<div style="display:none">
    <div id="player"></div>
</div>

youtubeapi.js

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: '600',
    width: '100%',
    videoId: "videoid",
    playerVars: { 
        'autoplay': 1,
        'controls': 0,
        'wmode': 'opaque',
        rel: 0,
        enablejsapi:1,
        'origin': window.location.origin
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange,
    }
  });
}

function onPlayerReady(event) {
    event.target.playVideo();
}
function pauseVideo() {
    player.pauseVideo();
}
  
var done = false;
function onPlayerStateChange(event) {
    switch(event.data){
        case 0:
            player.stopVideo();
            break;
    }
}
function stopVideo() {
    player.stopVideo();
}

$(function(){
    $(".btn-play").on('click',function(){
        player.loadVideoById($("#videoid").val(), 0, "default");
        player.playVideo();
        console.log("play!",player.playVideo());
    
    });
})

希望你们能帮助我：D

【问题讨论】：

标签： javascript html jquery youtube-api

【解决方案1】：

请在您的 YouTube iframe 设置中添加 'mute': 1 - 我读过有关在视频静音之前不会启用自动播放的信息 - 这是浏览器的“安全”功能。

您可以在 Stack Overflow 的其他问答中找到更多信息。

您可以查看以下来源以获取更多信息：

【讨论】：