Question

我拼凑了this little fiddle here，我对视觉效果感到满意。目标是制作一个集中的响应视频iframe。

但我一直无法找到一个添加最大宽度为1920px的好方法。如果你有一个完整的高清视频，那就不要让它变得更大。

如果我的CSS可以改进，请不要犹豫。

<div class="container">
    <div class="embed-responsive">
         <iframe width="640" height="360" src="https://player.vimeo.com/video/176131682?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>


html, body {
    height: 100%;
    margin: 0;
}
.container {
    height: 100%;

}
.embed-responsive {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    margin-top: -28.1%;
    /* video height / video width */
    padding-bottom: 56.2%;
    height: 0;
    overflow: hidden;
}
.embed-responsive iframe {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    margin: auto;
}

Answer 1

我的解决方案是在iframe包装器/父对象周围添加包装器。这样一来，您就不会打扰iframe结构，因此iframe包装器可以适应自己的父级。我希望它很清楚：）

npm install react --save

Answer 2

您基本上可以保持iframe的属性，并将最大宽度添加到容器中。您需要将其位置更改为相对位置，并将其设置为块级元素，以确保它保持居中。见下文：

.embed-responsive {
    position: relative;
    display:block;
    margin:0 auto;
    width: 100%;
    max-width:1920px;
    padding-bottom: 56.25%;
    top: 50%;
    transform:translateY(-50%)
}
.embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 100%;
}

FIDDLE：https://jsfiddle.net/2nu817d9/21/

如何将max-width添加到响应式iframe？

2 个答案: