Actual Responsive Background Video Cover

Tutorials of (Actual responsive background video cover) by Lisa benmore

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Actual Responsive Background Video Cover</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id='container'>
  <video src='https://d2pxo8g26zv991.cloudfront.net/wp-content/uploads/2014/10/HomeVideo_v04_1.mp4' autoplay muted loop></video>
</div>
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#container{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Downloaded from https://www.codeseek.co/ */
let video = document.querySelector('video');

const setVideoDimensions = () => {
  if (window.innerWidth / window.innerHeight > 16 / 9) {
    video.style.width = '100vw';
    video.style.height = 'calc(100vw * 9 / 16)';
  } else {
    video.style.width = 'calc(100vh * 16 / 9)';
    video.style.height = '100vh';
  }
};

window.onresize = setVideoDimensions;
setVideoDimensions();

This awesome code ( Actual Responsive Background Video Cover ) is write by Lisa Benmore, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Lisa Benmore