Fullscreen Background Video Slideshow on iOS devices - note currently uses jquery :)

jekyll.html

{% 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 %}

vids.js

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

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. :)

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

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

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.