This is my first attempt at a web video project and I'm struggling to create a full-width video header or background. Any help would be greatly appreciated.
I came across an example that achieves what I am looking for with the following specifications: .mp4 file in 640x360 format @ 23 fps (613kbps) which works perfectly on all displays, showing the entire frame without any issues.
After some research, I found that the recommended video format is 720 x 24fps, so I gave it a try with actual dimensions of 1280x720. However, I noticed that it only looks good on browser resolutions less than maximized, as part of the bottom section (about 18% of the frame) remains invisible until you scroll down. Buffering was also an issue with the 720 format, unlike the smooth playback of the 640x360.
The video editing software I use (Sony Vegas) does not offer a 640x360 option, with the closest being 640x480 which results in the same problem - the video being too tall with the bottom portion cut off.
I found a website that utilizes the 1280x720 format successfully (), but I am unsure how they achieved it.
If anyone could provide guidance on how to make the video work seamlessly while maintaining visibility of the whole image, I would be grateful.
Thank You.
Here's the current code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>;
<script>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
</script>
<style>
body{ margin:0px; background:#000; max-width:1000; }
#bg_container{ height:800px; overflow:auto; }
#bg{ width:100%; }
</style>
</head>
<body>
<div id="bg_container">
<video id="bg" src="www.parishpc.com/images/720.mp4" autoplay loop muted"></video>
</div>
</body>
</html>
A slightly improved version of the code, where only the bottom 5% is not visible:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>
<style>
body, html {
margin: auto;
background:#fff;
height: 100%;
}
header {
height:100%;
width:100%;
overflow:hidden;
position:relative;
}
.video {
position:fixed;
top: 50%; left: 50%;
z-index:1;
min-width: 100%;
min-height: 100%;
width:auto;
height:auto;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<header>
<video autoplay loop class="video">
<source src="www.parishpc.com/images/720.mp4" type="video/mp4">
</video>
</header>
</body>
</html>