Hey there! I’m having a strange problem. I was recently working out a few kinks on my home page where I have 3 background videos that appear on hover. For specific reasons I needed to figure out a better way to have them displayed on the page (current method was causing page sizing issues). However, now these videos always seem to only be displayed with the height and width of the page itself, not the height and width of the video.
This is tells me that I’m doing something wrong except for the fact that when I load up a backup of my site when things were functioning (aside from that small page sizing issue I was originally trying to fix) my setup works perfectly. When copying and pasting them into the current version of the site, they break and do this weird cropping thing.
Here is a screen recording of the problem.
And here is the custom embed code i’m using for the videos. I’m pulling the URL’s from a separate page on my website where I have them uploaded into bg videos. I’m using the method detailed here.
<div class="video-cover">
<video width="100%" muted autoplay playsinline loop data-object-fit="cover">
<source src="https://assets.website-files.com/636355fd5d1533638e1ad715/63caf416912b5c673057fb76_mograph_header-transcode.mp4" type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>
</div>
<style>
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-cover video {
object-fit: cover;
}
</style>
Here is my site Read-Only: Webflow - Jeremy Portfolio v002
And here is a link to my live, active site, where you can see the effect in action on the top of the page when you hover over the big type:
https://www.jeremy.work