Archived topic
Stretching hero video to fill today's wider screens
8 replies · Started by Chris on December 10, 2021
Hello! My agency website http://www.moonraker.ai and also a few of my client websites are running hero videos overlaid with a call to action. These have looked awesome on both desktop and mobile, but I just purchased a couple new screens for xmas with wider dimensions and the video is cut off within a smaller rectangle.
I'm wondering if there is some sort of css or html that I can add to the homepage element to inform the video to stretch larger? The static pic headers look ok but a video cutting of halfway down the screen doesn't feel right.
Thanks for your help!
Hi Chris,
Can you show me a page with the new video background?
the homepage http://www.moonraker.ai is the only page with a video on the site and in my case the screen res is 2560x1440 and it's not stretching all the way. Below is an image of how it looks for me
This is what I see of your home page:
https://www.screencast.com/t/NqFOOO8bi
Did you add inline style display:none; to the video element？ Can you remove it so I can see the video?
By the way, I checked the video URL, doesn't seem to work on my end.
Does it work on your end?
I don't believe I added that.. here is the code:
<video loop muted autoplay class="background-video">
<source src="https://ads.moonraker.ai/wp-content/uploads/2020/07/Header-Video-New.mp4" type="video/mp4">
</video>
<br>
<h3 style="font-size:30px;">Get an Instant SEO Report</h3>
[WP-Coder id="3"]
I also don't know what you mean by the video link itself.. do you mean the one that I posted in the last comment? I took a screenshot of the background as I see it.
Can you try change this CSS:
.background-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 1;
}to:
.background-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 1;
object-fit: cover;
}that doesn't seem to have worked!
not sure what I did but I managed to fix it! I basically copied the code and replaced the video and fallback poster from another installation that was working properly and now it looks great!
Great! Glad you fixed it :)
