Question: I have a containing element, the height of which will vary in response to the viewport width. It will have video content loaded into it from vimeo and youtube.

What I want to do is to create a responsive embed that holds the aspect ratio of the video, based on the height.

I am aware of the conventional method that uses height: 0, and a percentage based padding-bottom, allowing the width to be set as required, but this isn't quite what I need.

I want to be able to specify the *height*, and have the width of the element calculated automatically. Is this possible in css or do I need to resort to js?

Answer: 
You can try 

```css
.responsive-iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
```

You can use Bootstrap 

```html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
```
You can do it with css. Just put a `height:100vh` or whatever height you want, and a `width:100%` on your media and it will take the height of the viewport and the width of the parent's element. Then you can use the background-size property so that the medias keeps its ratio : <https://developer.mozilla.org/fr/docs/Web/CSS/background-size>

Let me know if you need more help !