Tutorial on Playing Background Video On Click?

General Web Dev
1

I’m trying to find some tutorials on how to create a (full screen height) background video to play on a click of a link button? Basically there will be a poster image covering the video with the following code:

<video src="your_video" width="250" height="50" poster="your_image"></video>

and then I will have some text with a call to action button for the user to play the video (full screen height). I’m not sure how to go about doing this and could use some tutorial recommendations.

Thank you.

1 Like
Full Height Viewport Backround Image/Eventually Video to Replac
2

Hi,

Here is an example of how to control a player using external buttons:

3

Thanks, megazoid. But that’s not what I’m looking for.

Take a look at this screenshot.

1368×516 1.16 MB

So there’s a poster image that displays with the button and the user clicks on the button to watch the video.

4

As far as I understand that is exactly what you’re looking for.
You have a button and <video> tag and want to play that video on button click.
My example shows how to do that.
The difference is only in CSS.
You want something like that:

video { 
    width:100%; 
    height:100%; 
}

button { 
    position:absolute; 
    z-index:100;
    left:50%; top:50%;
    width:100px; height:50px;
    margin-left: -50px; margin-top: -25px;
    background:green;
    color:#FFF;
}
1 Like
5

I’m sorry, megazoid. You are correct. The functionality is there. What would be your suggestion to fade the button after the user clicks on it?

6

Select the button and also on click use a jquery .fadeTo()?

http://api.jquery.com/fadeTo/ or css display:none?

1 Like
7

Well if that’s the case, then I guess I can use ‘animate.css’ to fade out something once clicked, too, yes?

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.