4

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.com/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!

Jeppe R
  • 113
  • 1
  • 8

2 Answers2

0

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.com/video/364558071?background=1&api=1&loop=1&title=0&byline=0&portrait=0&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>
DreamTeK
  • 32,537
  • 27
  • 112
  • 171
  • Ok.. Thanks... But what about some kind of javascript solution? – Jeppe R Jun 25 '21 at 18:55
  • @JeppeR The issue will be the same. You can use JavaScript to edit the iframe but editing the contents within the iframe is a built in browser restriction to prevent cross site scripting attacks. The only solution I can think of is modifying the content before it's rendered in the iframe, this would mean reviewing the API at source. – DreamTeK Jun 28 '21 at 08:00
0

Hey I'm too new on SO to comment, 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.com/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.com/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%;
}
Nate
  • 72
  • 9