Video Module

video-page.liquid

    {% if video_url != blank %}
      {% include 'video',
        class: 'about__background__video',
        url: video_embed,
        loader: false
      %}
    {% endif %}

video.css

.video {
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  @media (--m){
    display: block;
  }
}
.video__frame {
  top: calc(50% + 27px); /* Extra 27px to push player controls out of frame */
  left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  &.player-is-ready {
    opacity: 1;
  }
}

video.js

import select from 'dom-select'
import on from 'dom-event'
import scroll from 'raf-scroll.js'
import { isMobile } from '../../assets/js/lib/util'

export const resizeIframe = (viewport, iframe) => {
  const iframeRatio = 16 / 9
  let viewportRect = viewport.getBoundingClientRect()
  let width = viewportRect.width
  let height = viewportRect.height
  let ratio = width / height
  // Pad width and height with 96:54 (16:9) so controls can be cropped out
  let targetWidth = width + 96
  let targetHeight = height + 54

  if (ratio < iframeRatio) {
    // Viewport is taller than video, correct the width
    targetWidth = height * iframeRatio + 96
  } else {
    // Viewport is wider than video, correct the height
    targetHeight = width / iframeRatio + 54
  }

  iframe.setAttribute('style', `width: ${targetWidth}px; height: ${targetHeight}px`)
}

export const initPlayer = (viewport, iframe) => {
  // Initialize player
  let player = new Vimeo.Player(iframe)

  player.setVolume(0)
  player.setAutopause(false).then(function (autopause) {
  // autopause was turned off
  }).catch(function (error) {
    switch (error.name) {
      case 'UnsupportedError':
        // Autopause is not supported with the current player or browser
        break
      default:
        // some other error occurred
        break
    }
  })
  player.play()
  player.on('bufferend', function () {
    iframe.classList.add('player-is-ready')
  })

  // Pause and play depending on visibility
  scroll((y) => {
    let viewportRect = viewport.getBoundingClientRect()
    if (viewportRect.bottom >= 0 && viewportRect.top <= window.innerHeight) {
      player.play()
    } else {
      player.pause()
    }
  })
}

export default el => {
  const viewport = el
  const iframe = viewport.querySelector('iframe')

  resizeIframe(viewport, iframe)

  window.addEventListener('resize', function (event) {
    resizeIframe(viewport, iframe)
  })

  if (!isMobile()) {
    initPlayer(viewport, iframe)
  }
}

video.liquid

{% assign class = class | default: blank %}
{% assign url = url | default: blank %}
{% assign object_fit = object_fit | default: 'cover' %}
{% assign loader = loader | default: false %}
{% assign player = id | camelcase %}

{% capture css %}
  {{ class }} video fit-{{ object_fit }}
{% endcapture %}

<div class="{{ css | strip }} abs fit" data-module="video">
  {% if loader %}
    <i class="img__loader"></i>
  {% endif %}
  <iframe class="video__frame abs" src="{{ url }}?loop=1&title=0&byline=0&portrait=0&controls=0" frameborder="0" allow="autoplay"></iframe>
</div>

<script src="https://player.vimeo.com/api/player.js"></script>

{% assign class = blank %}
{% assign url = blank %}
{% assign object_fit = blank %}
{% assign loader = false %}
{% assign player = blank %}