Video with a min-height

I'm currently developing a component for a project that has a video background with some moving type on top of it. It looks great except when it gets down to mobile. I've also encountered this problem when trying to make video heros; they look great on large screens but if you keep the video ratio the same all the way down to mobile, it gets super cramped if you're using the fluid box / padding bottom / aspect ratio CSS trick.

So I wanted to improve upon this and find a way to stop the height from getting too short on smaller screen sizes. Took me a bit of trial and error but it turned out to be pretty simple and it looks like this:

I use tachyons to get 80% of the way there on projects, which explains the absolute, flex, items-center, etc classes. The only classes we're really concerned about for this example is video--callout and the iframe.

The HTML structure: #

<div class="video--callout">
  <div class="absolute absolute--fill z-999 flex items-center">
    <!-- hero text content goes here -->
  </div>
  <iframe
    src="vimeo-embed-url-goes-here?background=1"
    width="640"
    height="256"
    frameborder="0"
    allow="autoplay; fullscreen"
    allowfullscreen=""
  ></iframe>
</div>

The CSS: #

.video--callout {
  position: relative;
  height: 40vw;
  min-height: 50vh;
  overflow: hidden;
}
.video--callout iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 200vh;
  transform: translate(-50%, -50%);
}

This produces a component that doesn't get any smaller than 50vh high, which looks like this:

The min-width property can be set to anything large (I used 200vh). Since the height is set on .video-callout, the height: 100% on the iframe will ensure it fills that whole div, so the 200vh ensures it breaks outside the div because it will certainly be wider than the width of the screen. Then we use overflow: hidden and the top, left, translate properties to hide the overflow and ensure the video is always centered in the div.