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

htmlcssvideoyoutube


Solution 1:[1]

Using this '&autoplay=1' attribute you can also play your youtube video direct on button click...

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Firoz khan agwan

Related Questions