css - 使视频 iFrame 响应式

Question

我在这个问题上待了几天，似乎没有什么对我有用。我正在 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>

有什么帮助吗？

Answer 1

Iframe 中的响应式视频

• 将 iframe 包裹在块元素中（例如 div）
• 包装 div 的重要样式：
  • position:relative（允许绝对定位的孩子（即 iframe）在其边界内移动
  • padding-bottom（允许适当的相对高度到 iframe 的真实高度）
    • 纵横比
    • 16:956.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（不再需要前缀，=也从未需要）

参考

流体宽度视频

演示

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

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>