css - 使视频iFrame响应

我在这个问题上已经几天了，似乎没有任何工作适合我。我正在WebFlow上构建此网页，我也尝试过直接编辑CSS。

情况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>

情况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>

情况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>

有什么帮助吗？

最佳答案

iframe中的自适应视频


  
  将iframe包裹在一个块元素中（例如div）
  包装div的重要样式：
  
  
  position:relative（允许绝对定位的子级（即iframe）在其边界内移动
  padding-bottom（允许适当的相对高度到iframe的真实高度）
  
  
  长宽比
  16：9 56.25%
  4：3 75%
  
  overflow: hidden（使div的边缘尽可能接近iframe的边缘）
  height:0（使填充物负责高度）
  
  





  
  iframe的重要样式：
  
  
  position:absolute（允许iframe保持在环绕div的边缘）
  left: 0（请参见上文）
  top: 0（请参见上文）
  height: 100%（请参见上文）
  width: 100%（见上文）
  
  





  
  iframe的属性
  
  
  width='100%'
  height='100%'
  allowfullscreen（不再需要前缀，并且不再需要=）
  
  


参考

Fluid Width Video

演示版

.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>