Iframe中的响应式视频

Question

我在这个问题上的日子似乎并没有什么对我有用。我在WebFlow上构建这个网页，我也尝试过直接编辑CSS。

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

任何帮助？

Answer 1

Iframe中的响应式视频

将iframe包装在块元素（例如div）
中
包装div的重要样式：

padding-bottom（允许绝对定位的儿童（即iframe）在其境内移动

56.25%（允许适当的相对高度到iframe的真实高度）

宽高比

16：9 75%

4：3 overflow: hidden



height:0（将div的边缘剪切为尽可能靠近iframe的边缘）

position:absolute（使填充负责高度）

iframe的重要样式：

left: 0（允许iframe保持定位到包装div的边缘）

top: 0（见上文）

height: 100%（见上文）

width: 100%（见上文）

width='100%'（见上文）

iframe的属性

height='100%'

allowfullscreen

=（不再需要前缀，且永远不需要.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; }）

参考

Fluid Width Video

演示

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 2

对于自适应视频（存储在Vimeo或YouTube上），您可以使用FitVids

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
    $(document).ready(function() {
        $("#myvideo").fitVids();
    });
 </script>

制作视频iFrame响应

2 个答案:

Iframe中的响应式视频

参考

演示