Background loop video

by Génesis García Morilla

HTML

<video autoplay loop muted poster="https://storage.googleapis.com/coverr-public/poster/Tel-Aviv-Beach.jpg">
  <source src="https://app.coverr.co/s3/mp4/Tel-Aviv-Beach.mp4">
</video>

CSS

body {
  margin: 0;
}

video.landscape {
  width: 100vw;
  height: auto;
}

video {
  width: auto;
  height: 100vh;
}

JavaScript

function set_viewport() {
  if (window.innerWidth >= window.innerHeight)
    document.querySelector('video').classList.add('landscape');
  else // portrait
    document.querySelector('video').classList.remove('landscape');
}

window.addEventListener('resize', set_viewport);

// Before any resize we have to set the viewport
set_viewport();