Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fullscreen Background Video Slideshow on iOS devices - note currently uses jquery :)
{% for video in site.static_files %}
{% if video.path contains 'img/videos' %}
<video muted playsinline>
<source src="{{ site.baseurl }}{{ video.path }}" type="video/mp4">
</video>
{% endif %}
{% endfor %}
window.__next_video = 0;
function playNextVideo() {
if (window.__next_video === $('video').length) {
window.__next_video = 0;
}
playVideoAtIndex(window.__next_video);
window.__next_video++;
}
function playVideoAtIndex(index) {
$('video').each(function(i, video) {
var $vid = $(video);
var vid = $vid[0];
$vid.off('ended');
$vid.fadeOut('fast');
if (index === i) {
vid.load();
vid.play();
$vid.fadeIn('fast');
$vid.on('ended', playNextVideo);
}
});
}
playNextVideo();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.