Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Greg Galus
13,228 PointsLightbox video intro to website
I just completed this lesson and now may have some use for it. I think? A client wants a short video intro when their site is visited. I already have the video. I know that the light box can be displayed on the event of a page loading. Is there a way to make the light box disappear automatically when the video finishes? Can you even put a video in a light box without linking to something like you tube, vimeo, etc? All the tutorials I can find show this method. Any help is appreciated. Thanks.
6 Answers
Jeremy Germenis
29,854 PointsYou can use html5 video tags to display a non streaming service video you are hosting. You will just need the video in a few different formats for each browser.
You could then call a media event with something like
var video = ('#myVideo');
video.onended = function() {
//CALL --> CLOSE LIGHTBOX
}
A link to html5 media events: http://www.w3.org/TR/html5/embedded-content-0.html#mediaevents
Greg Galus
13,228 PointsThanks for the reply Jeremy. I will give that a try.
Paul Hogan
1,508 PointsYou may already be aware:
If the video file is already hosted somewhere you can use dirply.com to convert the file to the different formats without using a desktop app. The MP4 and webm formats are both necessary because each browser (desktop and mobile) supports one or the other.
Greg Galus
13,228 PointsThanks Paul. That will come in handy as well.
Paul Hogan
1,508 PointsGreg,
Typo - It should be dirpy.com.
Greg Galus
13,228 PointsFor anyone else that may want to do this who happens to stumble across this post. I tried the .onended() function that Jeremy above mentioned. I could not get it to work for whatever reason. Maybe I was missing something. But, I found this bind function and it did work very easily. #myVideo is the id on the actual <video> html tag, #mask is my darkened background, .window contains the video.
The video now disappears when the video ends. Thanks again to those who helped in this post.
$('#myVideo').bind("ended", function(){
$('#mask').remove();
$('.window').remove();
});