Question

我已经将视频的现有代码嵌入为iframe。我想将此视频转换为16：9的宽高比。我无法更改应用于类.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

这是引导响应式嵌入的简单方法：

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%;
}

这里在引导程序自己的网站上起作用：https://getbootstrap.com/docs/4.1/utilities/embed/

如何将iframe视频转换为16by9

1 个答案: