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