如何通过外部按钮触发YouTube iframe嵌入视频的播放

可以通过外部按钮控制YouTube iframe内嵌视频的播放，需要调用YouTube官方提供的iframe Player API完成跨框架的播放控制操作，具体实现逻辑和示例如下：

必要配置说明 #

• 需要在iframe的src地址末尾追加enablejsapi=1参数，开启JavaScript控制权限
• 需保留iframe的autoplay权限配置，避免浏览器自动拦截播放动作

完整可运行示例代码 #

<!-- 外部控制按钮 -->
<button id="playBtn">Play Button</button>

<!-- 追加enablejsapi=1参数的YouTube iframe -->
<iframe id="youtubePlayer" width="560" height="315" src="https://www.youtube.com/embed/HJtJXMKpl2g?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<script>
// 动态加载YouTube iframe API脚本
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

let player;
// API加载完成后初始化播放器实例
function onYouTubeIframeAPIReady() {
  player = new YT.Player('youtubePlayer');
}

// 绑定按钮点击事件触发播放
document.getElementById('playBtn').addEventListener('click', () => {
  player.playVideo();
});
</script>

免责声明：示例中使用的iframe内嵌视频版权归原作者所有，此处仅作技术演示使用。

内容的提问来源于stack exchange，提问作者Manu