Actual Responsive Background Video Cover

In this example below you will see how to do a Actual Responsive Background Video Cover with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by lbenmore, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lbenmore ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/lbenmore/actual-responsive-background-video-cover-aBdLVO */
#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/lbenmore/actual-responsive-background-video-cover-aBdLVO */
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();

Comments