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.
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.