Creating parallax effect with HTML background video

Question

I created a web page with parallax effect by using HTML5 video element and its working as expected in my local machine. But when I uploaded the files to my web hosting server and access the website the background video is not playing and it's totally not visible anywhere on the screen except a small portion of it appears below navbar when I scroll up fast enough from the bottom of the webpage.

HTML element:

<video loop autoplay>
 <source src="https://s3.ap-south-1.amazonaws.com/howthatworks/video.mp4" type="video/mp4">
</video>

CSS for my background video element:

video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
margin-top: 98px;
transform: translateX(-50%) translateY(-50%);
}

Any ideas about this?

It's working perfectly when I run my website on the files that are stored on my local hard drive.

Answer 1

Please use the src of video link inside the source tag as given below.

<video loop autoplay>
  <source src="https://s3.ap-south-1.amazonaws.com/howthatworks/video.mp4" type="video/mp4">
</video>

Here is the codepen demo link.