0

I'm trying to embed a Vimeo player as a background, and for it to fill the container, but it keeps showing with gaps on either side.

The only way I can kind of fix it is by setting the width and height both to like 150% or something, but then the causes a lot of clipping

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>vimeo background-style embed</title>
        <style>
            /* reset */
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            body,
            html {
                height: 100%;
            }

            .container {
                position: relative;
                width: 70%;
                height: 500px;
                overflow: hidden;
                margin: 200px auto;
                background: red;
            }

            .responsive-iframe {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                transform: translate(-50%, -50%);
                aspect-ratio: 16 / 9;
                min-width: 100%;
                min-height: 100%;
                pointer-events: none;
            }

        </style>
    </head>
    <body>
        <div class="container">
            <iframe
                class="responsive-iframe"
                src="https://player.vimeo.com/video/***********?background=1&autoplay=1&loop=1&muted=1&controls=0"
                frameborder="0"
                allow="autoplay; fullscreen; picture-in-picture"
                allowfullscreen
                title="Vimeo Background"
            ></iframe>
        </div>
    </body>
</html>
Improve this question
2
  • 1
    You set the container's width to be 70% and left/right margins to be auto. The gaps on either side is 15% which is half the remaining width 30%. Can you try setting the width to be 100%? Commented May 7 at 23:10
  • 1
    I'd use an aspect-ratio media query here. Figure out at which viewport aspect ratio the 70% width / 500px height of your container will result in a 16:9 ratio - and then position the iframe accordingly, so that its "excess" will either go to the side, or top/bottom. Commented May 8 at 7:03
Related questions
342
Get img thumbnails from Vimeo?
1
Embed Vimeo Player (or any iframe video player) full width and height
1
Is it safe to add 'allowfullscreen' param automatically for all iframes?
Load 2 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.