Responsive remote videos

Drupal renders remote videos as iframes. Here is how you can set a ratio for an iframe to make it behave similarly to the HTML <video> tag? This is applicable to more than just videos.

.field--name-field-media-oembed-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  background: $black;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}