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 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(); |
only bug i see is that you're using the same index variable name for both
loops ` window.__next_video = 0;` should probably be something like `
window["__next_{{name}}_video"] = 0;`
…On Fri, Sep 27, 2019 at 1:55 PM Kevin Fremon ***@***.***> wrote:
@blairanderson <https://github.com/blairanderson> - That would be
helpful, wouldn't it. :)
Here is my very minimal re-write:
(function(){
window.__next_video = 0;
function playNextVideo() {
if (window.__next_video === $('#hs_cos_wrapper_{{ name }} video').length) {
window.__next_video = 0;
}
playVideoAtIndex(window.__next_video);
window.__next_video++;
}
function playVideoAtIndex(index) {
$('#hs_cos_wrapper_{{ name }} video').each(function(i, video) {
var $vid = $(video);
var vid = $vid[0];
$vid.off('ended');
$vid.fadeOut('0');
if (index === i) {
vid.load();
vid.play();
$vid.fadeIn('0');
$vid.on('ended', playNextVideo);
}
});
}
playNextVideo();
}())
The only main difference is the #hs_cos_wrapper_{{ name }} proceeding
VIDEO. This is basically generates a unique ID and helped me at least get
as far as to have the videos play on multiple rows.
Thanks man! You're a lifesaver.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<https://gist.github.com/bd9b8f25b3964aa4c071670e9bbaf2fe?email_source=notifications&email_token=AAHJKWBE5D2V52M5QDIBBS3QLZXLXA5CNFSM4I3JSSH2YY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAFZQTE#gistcomment-3039538>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAHJKWBHRYSISKGIZUDZ3HTQLZXLXANCNFSM4I3JSSHQ>
.
--
Blair Anderson
425-829-1130
@blairanderson <https://twitter.com/blairanderson>
@blairanderson Thank you so much for pointing that out! I'll adjust that and give it a try.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@blairanderson - That would be helpful, wouldn't it. :)
Here is my very minimal re-write:
The only main difference is the #hs_cos_wrapper_{{ name }} proceeding VIDEO. This is basically generates a unique ID and helped me at least get as far as to have the videos play on multiple rows.
Thanks man! You're a lifesaver.