Question

我正在尝试找到一种方法来缩放视频以适合与标题照片相同的宽度。

如何将视频缩放到与原始网站相同的大小？这是codepen； https://codepen.io/anon/pen/wZbjNw

作为参考，我正在尝试模仿以下网站：https://jackwhiteiii.com/

.jwlogo {
  max-width: 69%;
  height: auto;
  padding: 13px;
  image: no-repeat
}

.video {
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 13px;
}

<header>
  <div class="headerlogo">
    <img class="jwlogo" src="https://jackwhiteiii.com/wp-content/themes/lazaretto/images/JW_BHR_SplashPage_tiny.jpg" alt="Header Logo">
  </div>
</header>
<container>
  <div class="video">
    <iframe class="vevovideo" width="560" height="315" src="https://www.youtube.com/embed/8vKTaoxvZMY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</container>

Answer 1

当您要制作响应视频时（宽度和宽度分别为100％和高度），通常的做法是将视频绝对定位在元素内，并根据视频的纵横比设置伪填充。

这里是示例： https://codepen.io/crishpeen/pen/Pgvabw

我还将徽标和视频添加到.container中，因此其宽度相同。

如何调整视频大小以适合其上方的图像大小？

1 个答案: