How do I make a full screen video play on button click?

Tips and tricks from Tamara Olson Designs

At the top of your page, add a container with your video with the ID “full-page-video” and an X with the class “close-full-page-video” and make sure your button has the class “watch-video”

The JS (that includes the logic of stopping the video so an invisible video doesn’t keep playing):

$('.watch-video').click(function() { $('#full-page-video').fadeIn(); });
$('.close-full-page-video').click(function() {
var $frame = $('#full-page-video iframe');
// saves the current iframe source
var vidsrc = $frame.attr('src');
// sets the source to nothing, stopping the video
$frame.attr('src','');
// sets it back to the correct link so that it reloads immediately on the next window open
$frame.attr('src', vidsrc);
$('#full-page-video').fadeOut();
});

The CSS to make things pretty:

#full-page-video { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999; }
.close-full-page-video { cursor: pointer; color: white; font-size: 60px; position: absolute; top: 20px; left: 20px; font-weight: 300; }


Share Your Thoughts

About the Author

TamaraAuthorPhoto

Tamara Olson is a self-employed UX designer and WordPress developer living in New York City.

Tamara Olson Designs Case Studies