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

Question

我不确定在这里问这个问题是否正确，但我正在尝试实现类似于 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>

运行良好！

现在，还有一个名为"Play Film"的按钮，单击该按钮会在前台启动类似的视频，而后台自动播放视频会停止。前景上的视频是一个 youtube iframe，当我放入时，它很好地嵌入到页面中，但我希望它仅在播放按钮 "Play Film" 时成为 played/displayed。

我一直试图在互联网上搜索如何实现它，但找不到我要找的东西。有人能给我指出正确的方向吗？

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

<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"));

}

非常感谢任何帮助，非常感谢！

Answer 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;
}

JS

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

Answer 2

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

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

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

Opening Youtube video, after clicking a custom button

html

css

youtube

video