Last active
February 4, 2022 21:10
-
-
Save blairanderson/bd9b8f25b3964aa4c071670e9bbaf2fe to your computer and use it in GitHub Desktop.
Fullscreen Background Video Slideshow on iOS devices - note currently uses jquery :)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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 %} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
@blairanderson Thank you so much for pointing that out! I'll adjust that and give it a try.