Opening Youtube video, after clicking a custom button

问题

I'm not sure if this is the correct place to ask this but, I am trying to implement something similar to what Project Jacquard by Google have done in this website https://www.google.com/atap/project-jacquard/

As you can see, there is a video that autoplays in the background (which i have dont using -

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

This runs good!

Now, There is also a button called "Play Film", which once clicked starts a similar video on the foreground, and the background autoplaying video stops. The video on the foreground is a youtube iframe, which when i put in, embeds well in the page, but i want it to be played/displayed only when the button "Play Film" is played.

I have been trying to search on the internet how to implement that, but can't find exactly what i'm looking for. Can someone please point me to the correct direction?

Here's the section that has the video, but i'm sure it won't be much help

<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>

And the javascript code-

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

}

Any help would be greatly appreciated, many thanks!

回答1:

I first style the video and iFrame using position: absolute;to make sure they're on top of each other. I also hid the iFrame so the user doesn't see it without pressing the button.

Then the only thing left to do is make the video play when the button is pressed. On button click I change the src attribute of the iframe so that the video starts playing when it shows.

Check it out here: https://jsfiddle.net/h7v0e1ku/

To make it transition a bit more smooth, you could use a setTimeOut() method, this is shown here: 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);
});

来源：https://stackoverflow.com/questions/31081350/opening-youtube-video-after-clicking-a-custom-button

标签

html

css

video

youtube