Cover background looping video not working on HTML-CodePudding

I tried making a looping background video but only the video controls are being displayed on the page, the rest is blank.

<section id="portfolio-cover" data-height="fullscreen">
   <div>
     <video id="background-video" playsinline autoplay muted loop width="320" height="240" opacity= 50 controls >
       <source src="chicago.mp4" type="video/mp4">
     </video>
   </div>
</section>

CodePudding user response：

I think the problem here is that the src is not being called correctly, is the file in the same folder as your html file? Or is it a link? Because I tested this out with a video link and a proper file path to the video and it works perfectly fine. Try double checking the path of your video file or if its a link, comment it here, so I can show you how to write it down in src=""

CodePudding user response：

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>videobg</title>
    <style>
    .mainblock{width:100%; float:left; margin:0 auto; padding:0; height:100vh; position:relative; overflow:hidden;}
.mainblock #video-background{
    position: absolute;
    left: 0;
    right:0;
    margin:0 auto;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width:100%; 
}
@media screen and (max-width:1024px){
    .mainblock #video-background{width:auto; height:100vh;}
}
    </style>
  </head>
  <body>
    <div class="mainblock">
        <video preload="metadata" id="video-background" controls="" autoplay="" loop="" playsinline="" muted="">
          <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
        </video>
    </div>
  </body>
</html>

Full screen Video tag html