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

Question

我的网站在主页顶部有一个类似于 AirBnb 的视频横幅。它上面有一个游戏字形图标。当我按下字形图标时，我希望 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 来挂钩这些函数到按钮单击处理程序。

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

Autoplaying a full screen YouTube video on button press with JQuery

javascript

youtube

jquery

ruby-on-rails

slim-lang