I now have browsed through a whole bunch of threads here on this topic, but all I can find is how to solve this issue on full screen. So.. how do I embed a Vimeo video iframe in a container with arbitrary size (not full size!), so it behaves like CSS background-size:cover. So basically that it overflows either Y or X. I also want to center the video in the container.

Here is my code:

<figure class="video-background ">
    <iframe src=";api=1&loop=1&title=0&byline=0&portrait=0&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>

My video-background div has a fixed height of 400px and a fluid width

This answer from Oliver shows how to do it on full-screen, but how do I mimic this behavior on a smaller div ? His solution looks like this:

.video-background {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
  .video-background iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-background iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}

Hope you can help! Thanks!

I now have browsed through a whole bunch of threads here on this topic, but all I can find is how to solve this issue on full screen. So.. how do I embed a Vimeo video iframe in a container with arbitrary size (not full size!), so it behaves like CSS background-size:cover. So basically that it overflows either Y or X. I also want to center the video in the container.

Here is my code:

<figure class="video-background ">
    <iframe src="https://player.vimeo./video/364558071?background=1&api=1&loop=1&title=0&byline=0&portrait=0&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>

My video-background div has a fixed height of 400px and a fluid width

This answer from Oliver shows how to do it on full-screen, but how do I mimic this behavior on a smaller div ? His solution looks like this:

.video-background {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
  .video-background iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-background iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}

Hope you can help! Thanks!

• javascript
• html
• css
• video
• vimeo

• Also looking for a solution to this! I'll let you know if I find something. – user9518069 Commented Sep 20, 2023 at 20:07

3 Answers 3

I found this from github that uses only CSS and it really works.

https://gist.github./tyidnet/4564bb5db8c1a612d3b5c44820277a4b

I am not sure you will be able to do this while using an iframe. The styling of the video within vimeo (and most other sites) calculate the width and height of the video based on the size of the container to purposely prevent overflowing.

Security changes in cross site origin prevent tampering with content inside an iframe (which would be required) if the iframe is sourced from a separate domain.

If you really want to do this you could source the video from your own domain and easily manipulate the overflow.

As it stands, you can only manipulate the iframe tag which you can contain in a wrapper like below, but due to the sub classes within the iframe I don't below you will be able to create overflow.

.video-background {
  display: flex;
  height:400px;
  background:#555;
}

.video-background iframe {
  flex: 1;  
}

<figure class="video-background ">
  <iframe src="https://player.vimeo./video/364558071?background=1&api=1&loop=1&title=0&byline=0&portrait=0&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>

Hey I'm too new on SO to ment, so I can't actually ask for more clarification lol. I think I have a solution for you though. Vimeo has an API, to make their video's responsive. Using that, you could do something like this:

     <div class="video">    

   In the div below I've changed your iframe to to include the Vimeo API script and allowed the video to be responsive.

  <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo./video/364558071?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo./api/player.js"></script>
   
    <div class="overlay">
      <p>If you want to overlay text you can add it here</p>
    </div> 
</div>



        .video {
        position: absolute;
        left: 0;
        top: 0;
         /*  Change the two values below to meet your requirements  */
        width: 50vw; 
        height: 100vh;
    }
    
    .video iframe {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
    }
    
/* If you want the overlay text style it here */

.video .overlay {
    font-size: 35px;
    position: absolute;
    text-align: center;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
}