I have a background iframe video in the hero section. In desktop mode, it looks like it should, it fills the screen properly. But in mobile mode, because the height is greater than the width and the video wants to keep a 16:9 ratio, it looks bad. I’m trying to find a solution to make an iframe video object-fit cover, if that’s even possible. I’ll leave a screenshot of what it looks like right now.
Mobile mode:
Can you include your read-only share link? That’s the only way for the community to see which settings are incorrect.
I exported this website. I no longer have it in webflow. I’ll take a screenshot of my html and css, maybe that’ll help.
Okay, I solved it all. I’ll explain it here in case there’s someone who has the same problem.
For me, video tag didn’t work for desktop, video couldn’t start playing if I used video tag, so I had to use the iframe tag. But I couldn’t make the iframe tag cover the whole screen on the mobile viewport because the height was greater than the width.
But video tag worked in mobile mode, I had to change the css code a little bit and video was playing while covering the screen.
So, I used media queries and showed the iframe on the desktop mode and on the mobile mode I used the video tag. I’ll leave a screenshot of how I did it. There was an easier way to do it 100%, but I won’t touch it unless it stops working.
