Can I use the Vimeo video HTML embed on mobile and tablet to cover the full screen, even if the video has a 16:9 ratio on Vimeo?
TL;DR
- Wrap the Vimeo iframe in a full-screen div set to 100vw/100vh with relative positioning.
- Style the iframe with absolute positioning, 100% width/height, and apply object-fit: cover using a custom CSS class to ensure full coverage on mobile and tablet.
Yes, you can make a Vimeo video embed cover the full screen on mobile and tablet, even if the original aspect ratio is 16:9.
Here’s how to do it in Webflow using responsive embed techniques:
1. Use a Responsive Embed Wrapper
- Drag an Embed element into your Webflow canvas where you want the video.
- Wrap the Vimeo
<iframe>in a div container that acts as a responsive wrapper. - Apply the position and sizing styles needed to make the container full-screen.
2. Set the Container to Fullscreen
- Set the wrapper div to 100vw width and 100vh height.
- Apply position: relative to the wrapper if you plan to absolutely position the iframe inside it.
3. Style the Vimeo <iframe> for Full Coverage
- Set the embed code using the Vimeo iframe, and inside the
<iframe>, add these attributes: - width="100%" height="100%" frameborder="0" allowfullscreen
- In the Webflow Styles panel or inline within the Embed:
- Apply position: absolute; top: 0; left: 0; width: 100%; height: 100% to the iframe.
- Add object-fit: cover using custom CSS to ensure the 16:9 video fills the screen without black bars.
4. Add Custom CSS for Object Fit
Since Webflow’s visual editor doesn’t support object-fit on iframes:
- Add a custom
<style>block in the page’s before </body> embed. - Example:
.video-iframe { object-fit: cover; }- Then assign the class video-iframe to your iframe in the embed code.
5. Control Overflow and Responsive Scaling
- Ensure overflow is hidden on the wrapper if needed.
- For better performance and user experience, you can also:
- Add
autoplay=1&muted=1&background=1to the Vimeo URL. - Example Vimeo src:
"https://player.vimeo.com/video/yourVideoID?autoplay=1&muted=1&background=1"
Summary
To make a 16:9 Vimeo video cover the full screen on mobile and tablet, wrap the video in a full-screen div, make the iframe fill 100% of the container, and apply object-fit: cover via custom CSS. This ensures the video fully covers the screen dimensions while maintaining responsiveness.