单击自定义按钮后打开 Youtube 视频答案

【问题标题】：Opening Youtube video, after clicking a custom button单击自定义按钮后打开 Youtube 视频
【发布时间】：2015-09-13 21:21:33
【问题描述】：

我不确定这是不是问这个问题的正确地方，但是，我正在尝试实施类似于 Google Project Jacquard 在本网站 https://www.google.com/atap/project-jacquard/ 所做的事情。

如您所见，有一个在后台自动播放的视频（我没有使用 -

        <video autoplay loop controls muted id="bgvid">
            <source src="video/Jacquard.mp4" type="video/mp4"> //the video here is downloaded from Youtube
        </video>

运行良好！

现在，还有一个名为“播放电影”的按钮，一旦点击该按钮，就会在前台开始播放类似的视频，而后台自动播放视频会停止。前台的视频是一个 youtube iframe，当我放入时，它可以很好地嵌入到页面中，但我希望它仅在播放“播放电影”按钮时播放/显示。

我一直在尝试在互联网上搜索如何实现该功能，但找不到我正在寻找的确切内容。有人可以指点我正确的方向吗？

这是有视频的部分，但我相信它不会有太大帮助

<iframe id="forPostyouradd" width="1349" height="600" src="https://www.youtube.com/embed/qObSFfdfe7I" frameborder="0" allowfullscreen></iframe>

<header class="header-image">
    <div class="headline" style="height: 850px;">

        <div class="container">
            <h2 style="padding-bottom: 20px;">Technology woven in.</h2>
            <button class="centerButton" onclick="postYourAdd()">Play Film</button>

        </div>

        <video autoplay loop controls muted id="bgvid">
            <source src="video/Jacquard.mp4" type="video/mp4">
        </video>

    </div>
</header>

还有 javascript 代码-

function postYourAdd () {
var iframe = $("#forPostyouradd");
iframe.attr("src", iframe.data("src"));

}

任何帮助将不胜感激，非常感谢！

【问题讨论】：

在前台？什么视频？你在你的标题中说一个 Youtube 视频，但在你的问题中没有提到它。你可能还需要一点 JavaScript。
嗨@putvande 谢谢你的评论。我现在对这个问题做了一些小的修改。背景视频是我从youtube上下载的，和前台的一样（我不知道如何实现）。您能否通过此链接查看我要复制的内容google.com/atap/project-jacquard

标签： html css video youtube

【解决方案1】：

我首先使用position: absolute;为视频和 iFrame 设置样式，以确保它们彼此重叠。我还隐藏了 iFrame，这样用户不按按钮就看不到它。

那么剩下要做的就是在按下按钮时播放视频。单击按钮时，我更改了iframe 的src 属性，以便视频在显示时开始播放。

在这里查看：https://jsfiddle.net/h7v0e1ku/

要使其过渡更平滑一点，您可以使用setTimeOut() 方法，如下所示：https://jsfiddle.net/cqLy3hz2/

HTML

<video class="vid" autoplay loop>
    <source src="video.mp4" type='video/mp4' />
    <img id="alternative" src="alternative.jpg" />
</video>
<iframe class="vid" id="yt" src="https://www.youtube.com/embed/qObSFfdfe7I" frameborder="0" allowfullscreen></iframe>
<div id="content">
    <p>Title</p>
    <center>
        <button>Click</button>
    </center>
</div>

CSS

.vid {
    width: 100vw;
    height: 400px;
    object-fit: cover;
    z-index: -1;
    position: absolute;
    background-color: black;
}
#yt {
    display: none;
}
#content {
}
p {
    color: white;
    font-size: 20pt;
    text-align: center;
    padding-top: 100px;
}
button {
    width: 100px;
    height: 30px;
}

$("button").click(function () {
    $("#content").hide();
    $("#yt")[0].src += "?autoplay=1";
    setTimeout(function(){ $("#yt").show(); }, 200);
});

【讨论】：

谢谢，稍作调整后，它就像一个魅力。你就是那个男人！干杯！
没问题，我的荣幸:)
它现在不工作......视频没有播放......你可以检查jsfiddle.net/cqLy3hz2
现在它不再在基于 Chromium 的浏览器上工作了。仍在使用 Firefox。

【解决方案2】：

使用此“&autoplay=1”属性，您还可以在单击按钮时直接播放您的 youtube 视频...

https://www.youtube.com/embed/[video-id]&autoplay=1

【讨论】：