-
-
Save mortsavi/926e9a3db43dda6129e222f139682ecf to your computer and use it in GitHub Desktop.
Fullscreen Background Video Slideshow on iOS devices - note currently uses jquery :)
This file contains 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 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