JSFiddle - React, Tailwind, and code Playground

HTML

<p>100% Absolute</p>
<div class="container">
  <iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<p>Rescaled and repositioned</p>
<div class="container sized">
  <iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<h3>Original video</h3>
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  height: 100%;
  position: relative;
  background: #eee;
  overflow:hidden;
  padding:0;
}
.container iframe {
  position:absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 320px) {
  .sized iframe {
      height: 180%;
      top: -40%;
  }
}