如何嵌入YouTube播放按钮并实现播放时打开自定义URL链接

方案1：自定义遮罩实现（兼容性最高，无同源策略限制） #

这是最容易落地的方案，不会受YouTube iframe的跨域规则限制：

• 页面先加载YouTube视频对应的缩略图作为展示层，在缩略图上方叠加和原生样式一致的播放按钮，把整个区域封装为可点击的DOM元素
• 绑定点击事件，单次点击同时触发两个动作：将缩略图替换为自动播放的YouTube iframe，同时执行window.open('你的自定义URL')跳转逻辑
• 如果不需要用户在当前页播放视频，直接点击后跳转自定义URL即可，无需加载iframe
  示例代码片段：

<div id="youtube-wrap" style="position:relative;width:640px;height:360px;cursor:pointer;">
  <img src="你存储的视频缩略图地址" style="width:100%;height:100%;">
  <!-- 可自定义播放按钮样式匹配原生YouTube效果 -->
  <div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:48px;background:#ff0000;border-radius:14px;"></div>
</div>
<script>
document.querySelector('#youtube-wrap').addEventListener('click', function() {
  // 替换为自动播放的YouTube iframe
  this.innerHTML = '<iframe width="640" height="360" src="https://www.youtube.com/embed/你的视频ID?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
  // 打开自定义跳转链接
  window.open('你的自定义跳转目标地址');
})
</script>

方案2：YouTube IFrame API监听播放事件（保留原生播放交互） #

如果需要保留原生YouTube播放器的所有交互功能，用官方API实现：

• 引入YouTube IFrame Player API初始化播放器实例
• 给播放器绑定onStateChange监听事件，当播放器状态变更为1（播放状态）时，触发自定义跳转逻辑
• 注意要把跳转逻辑关联到用户主动触发的操作回调内，避免被浏览器弹窗拦截

注意事项 #

• 所有跳转逻辑必须绑定在用户主动点击的事件回调中，否则大概率会被浏览器的弹窗拦截规则拦截
• 不要直接给跨域的YouTube iframe绑定原生点击事件，同源策略会限制你无法监听到iframe内部的点击动作

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