I'm working on a project that uses Fancybox to display single HTML5 Videos, as well as HTML5 video galleries.
For the single videos, I'm looking to autoplay the video as soon as it's opened in Fancybox, and then close Fancybox when the video has finished playing.
For the videos in a gallery, I'd like to autoplay the video when it's opened in Fancybox, advance to the next gallery item when the video finishes playing, and pause the current video / autoplay the next/previous video if the user navigates through the gallery.
I've included a codepen here: http://codepen.io/ericjacksonwood/pen/kXKkaq/ that includes a couple of my attempts working with Fancybox's "afterLoad" function:
// Attempt 01
$(".fancybox-video").find('video').play();
// Attempt 02
$(".fancybox-video").find('video').attr('autoplay','autoplay');
// Attempt 03
var vid = document.getElementsByClassName("fancybox-video");
function playVid() {
vid.play();
}
Any help would be appreciated! Thanks.
-------- Edit --------
The codepen has been updated and is working correctly.