<分区>
<分区>
我正在尝试设置视频样式，因为在移动版本上视频不适合屏幕。我有以下 HTML 代码:
<li>
<a class="uk-accordion-title" href="#">How much is the fish?</a>
<div class="uk-accordion-content">
<p><div class="iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/cbB3iGRHtqA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></p>
</li>
</ul>
</div>
</div>
因此，为了为移动版设置视频样式，我做了以下操作:
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
然而，当我在我的 CSS 文档中进行这些更改时，它没有任何机会。我不太确定我在这里做错了什么。是我没有选择正确的元素吗？我还有一张完整代码的图片，该图片太大了，无法发布:Full code
最佳答案
我保留了你的 HTML 和 CSS，但我改变了你的 css 的宽度
.iframe-container{
position: relative;
max-width: 100%;
padding-bottom: 56.25%;
max-height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
max-width:100%;
max-height: 100%;
}<li>
<a class="uk-accordion-title" href="#">How much is the fish?</a>
<div class="uk-accordion-content">
<p><div class="iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/cbB3iGRHtqA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></p>
</li>
</ul>
</div>
</div>关于html - 为移动版本设计嵌入式视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54581267/