Is there a method to have the video tag remain fixed to the top (or bottom from the element above the video tag)? Currently, when the window is resized, the video element moves away from the top (or bottom). Could this be due to the video tag attempting to maintain its aspect ratio, potentially related to the width: 100% property?
You can view a JSFiddle here that demonstrates the issue. Here is the code:
HTML:
<div class="background-video">
<video autoplay loop muted>
<source src="somevideo.mp4" type="video/mp4">
</video>
</div>
CSS:
.background-video
{
position: relative;
}
.background-video video
{
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
height: 1080px;
width: 100%;
}
How can I ensure that the video tag maintains its size and position correctly without any unwanted resizing?