CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
Cameron C
Cameron C

Reputation: 366

Hide content in DIV while expanding container and playing a video

I've seen it done but can't at the moment find the site.

I have a hero image with a play button and when it's clicked I'd like to hide the content of that div while expanding it then fading in a video.

I'm using the tag to absolutely position the embedded the video behind the hero copy.

I can do the CSS of transitioning the container and fading everything but I'm too novice with jquery to setup the scripting of it.

You can see what I have so far @ http://www.gigyastaging.com/

Currently video is overlaid and plays automatically, can I stop it from pre-loading and only load the video when the play button is clicked?

Upvotes: 0

Views: 577

Answers (1)

Justin
Justin

Reputation: 3397

First, remove the autoplay attribute:

<video id="video_background" src="http://player.vimeo.com/external/84613377.hd.mp4?s=7820d9cd4d5b295c7f289492772afb90"></video>

Next, hide the video from the user:

<video id="video_background" src="http://player.vimeo.com/external/84613377.hd.mp4?s=7820d9cd4d5b295c7f289492772afb90" style="display: none;"></video>

Now make some simple js code to listen for a click, fade the video in, play it, and finally fade out when the video has finished.

$("video").on("ended", function(){
    $(this).fadeOut();
});

$("#hero-play").click(function(){
   var v = $("video");

   v.fadeIn();
   v.get(0).play();
});

You may notice how I use v.get(0). This is because jQuery doesn't have a way to play the video, you need to get the raw DOM element and then call the play method belonging to the video element.

Simple jsFiddle example.

Upvotes: 2

Related Questions