Question

我的问题是如何使用内联CSS嵌入YouTube视频，这样它不仅会响应，而且会有最大尺寸，并且会保持在页面中心。（我知道我不应该使用内联CSS！我只使用它，因为除了HTML文件之外，我无法处理任何事情。）当我第一次嵌入它时，它有一个固定的大小，所以它不适合移动屏幕。我在网上找到的资源向我展示了如何使其适应页面的宽度，因此我几乎将它复制并粘贴到HTML中。内容如下：

<div style="position:relative;
padding-bottom:56.25%;
padding-top:35px;
height:0;
overflow:hidden;">
   <iframe style="position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    "width="560"
    height="315"
    src="redacted for privacy"
    frameborder="0"
    allow="autoplay; encrypted-media"
    allowfullscreen="">
    </iframe>
</div>

现在，它完全响应，但它在桌面上看起来很大，因为它是全宽的。我想编辑代码，使其达到一定的大小;比如大约600px宽。我有一些基本的HTML / CSS知识，但我完全不清楚在这段代码片段中做了什么。这段代码对我来说看起来很奇怪，而且我尝试过的调整都没能使它达到一定的大小和/或保持在页面的中心位置。

Answer 1

将宽度设置为100％，然后添加另一个属性：max-width:600px;

Answer 2

我已经编辑了您的代码，请使用此功能，您的视频将完全集中在每个屏幕分辨率上。

<div style="position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden;"> <iframe style="position: absolute; top:0; left: 50%; transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%); width: 100%; max-width:600px; max-height:400px; height: 100%;" src= "redacted for privacy" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=> </iframe> </div>

具有最大宽度的内联CSS响应嵌入式视频

2 个答案: