Making a video iFrame responsive

I'm days on this issue and nothing seems to work for me. I'm building this webpage on WebFlow and I also have tried editing the CSS directly.

Case #1: http://take.ms/UINVb

<style>
.lp1divblock {
      position: relative;
      height: 380px;
      margin-top: 10px;
      padding: 10px;
      border-radius: 10px;
      background-image: -webkit-radial-gradient(circle farthest-side at 50% 50%, #ffeaa7, #47bbcf);
      background-image: radial-gradient(circle farthest-side at 50% 50%, #ffeaa7, #47bbcf);
    }
</style>
    <div class="lp1divblock">
      <div class="lp1vidembed w-embed w-iframe">
        <iframe id="myvideo" src="https://player.vimeo.com/video/XXX?api=1&player_id=myvideo&loop=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
      </div>
    </div>

Case #2: http://take.ms/Wc6BN

<style>
.lp1divblock {
  position: relative;
  height: 380px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background-image: -webkit-radial-gradient(circle farthest-side at 50% 50%, #ffeaa7, #47bbcf);
  background-image: radial-gradient(circle farthest-side at 50% 50%, #ffeaa7, #47bbcf);
}

.lp1vidembed {
  position: static;
  min-height: 360px;
}
</style>

    <div class="lp1divblock">
      <div class="lp1vidembed w-embed w-iframe">
        <iframe id="myvideo" src="https://player.vimeo.com/video/XXX?api=1&player_id=myvideo&loop=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
      </div>
    </div>

Case #3: http://take.ms/ZV5Hr

    <style>
  .lp1divblock {
      position: relative;
      height: 380px;
      margin-top: 10px;
      padding: 10px;
      border-radius: 10px;
      background-image: -webkit-radial-gradient(circle farthest-side at 50% 50%, #ffeaa7, #47bbcf);
      background-image: radial-gradient(circle farthest-side at 50% 50%, #ffeaa7, #47bbcf);
    }

    .lp1vidembed {
      position: static;
      min-height: 360px;
    }

    @media (max-width: 479px) {
    .lp1divblock {
      position: relative;
      display: block;
      max-width: 420px;
      min-height: 190px;
      margin-top: 5px;
      margin-right: auto;
      margin-left: auto;
  }
  .lp1vidembed {
      position: static;
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      max-height: 220px;
      max-width: 420px;
  }
    }
    </style>

        <div class="lp1divblock">
          <div class="lp1vidembed w-embed w-iframe">
            <iframe id="myvideo" src="https://player.vimeo.com/video/XXX?api=1&player_id=myvideo&loop=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
          </div>
        </div>

Any help?

Solution

Responsive Video in Iframe

Wrap the iframe in a block element (e.g. div)

Important styles for wrapping div:

position:relative (allows absolutely positioned children (i.e. iframe) to move within it's borders

padding-bottom (allows the proper relative height to the true height of the iframe)

Aspect Ratio

16:9 56.25%

4:3 75%

overflow: hidden (clips the div's edges as close as possible to that of iframe's edges)

height:0 (makes the padding responsible for height)

Important styles for iframe:

position:absolute (allows iframe to stay positioned to the edge of wrapping div)

left: 0 (see above)

top: 0 (see above)

height: 100% (see above)

width: 100%(see above)

Attributes for iframe

width='100%'

height='100%'

allowfullscreen (prefixes are no longer needed and = was never needed)

Reference

Fluid Width Video

Demo

.w-iframe {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.w-iframe iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

<div class="lp1vidembed w-embed w-iframe">
  <iframe src="https://player.vimeo.com/video/83910533?color=fcdcb3&badge=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

<p><a href="https://vimeo.com/83910533">B  E  A  U  T  Y  -  dir. Rino Stefano Tagliafierro</a> from <a href="https://vimeo.com/rinostefanotagliafierro">Rino Stefano Tagliafierro</a> on <a href="https://vimeo.com">Vimeo</a>.</p>