javascript - 使用 JQuery 在按下按钮时自动播放全屏 YouTube 视频

Question

我的网站主页顶部有一个视频横幅，类似于爱彼迎的视频横幅。它上面有一个游戏字形。当我按下字形图标时，我希望 YouTube 上的视频以全屏模式打开并自动播放。然后，当用户退出全屏视频时，我希望 Iframe 消失并且所有音频停止。

现在我有这个用于 Slim 标记

.fullScreenContainer
    .video-container#autovid height="100%"
      = video_tag("broll2.mp4", autoplay: true, muted: true, preload:true, loop:true)
    .container#playButton
      .text-center
        h1#videoHeading Press Play to Watch the Video

        a href="javascript:void(0);" onclick="addIntroVideo()"
          span.glyphicon.glyphicon-play

这是我的 jQuery 函数

function addIntroVideo() {
    $('<iframe id="introVideo" src="https://www.youtube.com/embed/6a8fvbkNLWQ?rel=0&autoplay=1" frameborder="0" allowfullscreen="true"></iframe>').appendTo('.fullScreenContainer');
}

我的理解是，将 ?rel=0&autoplay=1 附加到 YouTube URL 会使视频以全屏模式播放并自动启动。然而，当我按下播放按钮时，它只会加载一个很小的 ​​iframe 并自动播放。如何更改此代码以使其执行我想要的操作？

Answer 1

不要自己制作 iframe。相反，使用 the YouTube iframe API example您可以在此 Slim 标签下添加嵌入式 JavaScript:

javascript:

JavaScript 创建 iframe 和一个名为 player 的对象，该对象具有 stopVideo() 和 startVideo() 方法，您可以使用更多JavaScript 将这些函数 Hook 到按钮单击处理程序。