Full-Screen Background Video with Autoplay and Loop in HTML
To achieve this, you can use the following HTML code:
<video autoplay loop muted playsinline style='object-fit: cover; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1;'>
<source src='your-video-file.mp4' type='video/mp4'>
</video>
Explanation of the code:
autoplay- This attribute automatically starts playing the video when the page loads.loop- This attribute makes the video play in a loop, repeating it after it ends.muted- This attribute mutes the video so that it doesn't play any sound.playsinline- This attribute allows the video to play inline on mobile devices.style='object-fit: cover; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1;'- This inline style sets the video to cover the entire screen, with a fixed position and a z-index of -1 to make sure it stays in the background.<source src='your-video-file.mp4' type='video/mp4'>- This is where you specify the source file of your video and its file type.
Note that some browsers may not support autoplay or loop, so make sure to test your page on different browsers to ensure it works as intended.
原文地址: https://www.cveoy.top/t/topic/nWxB 著作权归作者所有。请勿转载和采集!