如何将 iframe 视频转换为 16by9 的纵横比

Question

我有嵌入为 iframe 的视频的现有代码。我想将此视频转换为 16:9 的纵横比。我无法更改应用于 class .parent1 的 css。任何帮助如何通过 CSS?

.parent1 {
  position: absolute;
  left: 37%;
  top: 14%;
}

<div class="parent1">
  <div class="parent2">
    <iframe width="560" height="280" src="https://www.youtube-nocookie.com/embed/-UD4yHnEMeM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

Answer 1

这是一个简单的 bootstraps 响应式嵌入：

https://codepen.io/denns/pen/NLYWQJ?editors=0100

主要是：

.parent {
    position: relative;
    display: block;
    width: 500px;  // you will most like use 100% to fit into its parent
    padding: 0;      
}

.parent::before {
    content: '';
    display:block;
    padding: 56.25% 0 0 0;
}

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

这是在 bootstraps 自己的网站上运行的：https://getbootstrap.com/docs/4.1/utilities/embed/

如何将 iframe 视频转换为 16by9 的纵横比

How to convert a iframe video into aspect ratio of 16by9

css

iframe

aspect-ratio