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

JavaScript

Posted by erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Jquery lightbox problem, With video!

Hello, i followed the lightbox course in Jquery basics, but instead of using image, i used video, because i want to show a video on click, but i cant get the video to play when i clicked the button. i tried autoplay but then it started playing even before i clicked the button.

And after it was done playing ,it would not play anymore, so i had to update the browser everytime

heres the code

var $overlay = $('<div id="overlay"></div>');
        var $video = $("<video src='videor/123.mp4'></video>");
        var $caption = $("<p> </p>");
        // add video to overlay
        $overlay.append($video);

        // a caption to overlay
        $overlay.append($caption);

        // add overlay
        $("body").append($overlay);

        //Click on the button to show overlay
        $("a .button").click(function(event) {
        // event.preventDefault() prevents the link from working..
            event.preventDefault();
            var href = $("this").attr("href");
            //update overlay with the image linked
            $video.attr("src", href);
        //1.1 Show the overlay.
            $overlay.show();
            //1.2 Get the childs alt attribute to show caption
            var captionText = $(this).children("video").attr("alt");
            $caption.text(captionText);
        });

        //When overlay is clicked
        $overlay.click(function() {
            //hide the overlay
            $overlay.hide();
        });

1 Answer

Kenneth Black
Kenneth Black
23,140 Points
Kenneth Black
Kenneth Black
23,140 Points

you can add a command to play the video when the click event happens, in this case...

$overlay.show();
$video[0].play()

and then on the overlay click event, when you hide the overlay

$overlay.hide();
$video[0].pause()

(the "[0]" is necessary because play and pause are functions of the DOM element, not jQuery)