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();
@KevinFremon

This comment has been minimized.

Copy link

KevinFremon commented Sep 27, 2019

Blair! What's happening man? Thanks so much for making this magic-sauce of a script you wrote available. It works awesome when I'm using one instance of the script on a page. However, I'm running into an issue when using multiple instances? For example. My hero banner has video as well as a separate row farther down the page.

I've added specific IDs (#hero video) or (#row-2 video) as an example. That got me part of the way there.

If only one clip is added to each instance on the page, everything works great. But once I add a second clip to any of the instances on the page, as soon as the second clip plays through, they all go blank.

Any insight on how I might solve for that would be massively appreciated.

Thanks in advance. Hope you see this. :)

@blairanderson

This comment has been minimized.

Copy link
Owner Author

blairanderson commented Sep 27, 2019

@KevinFremon i also hope you see this. You should post some code here otherwise I cannot tell what you have added/changed.

@KevinFremon

This comment has been minimized.

Copy link

KevinFremon commented Sep 27, 2019

@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.

@blairanderson

This comment has been minimized.

Copy link
Owner Author

blairanderson commented Sep 27, 2019

@KevinFremon

This comment has been minimized.

Copy link

KevinFremon commented Sep 27, 2019

@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
You can’t perform that action at this time.