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

【问题标题】：Inline CSS Responsive Embedded Video with Max Width具有最大宽度的内联 CSS 响应式嵌入式视频
【发布时间】：2018-10-21 01:54:04
【问题描述】：

我的问题是关于如何使用内联 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 知识，但我完全不清楚这段代码 sn-p 在做什么。代码对我来说看起来有点奇怪，我尝试过的任何调整都无法使其在特定大小时最大化和/或保持在页面中心。

【问题讨论】：

好的，现在代码看起来像这样，如何居中？ <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%; max-width:600px; max-height:400px; height: 100%; height= "315" src= "redacted for privacy" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=> </iframe> </div>

标签： html video responsive-design embed inline

【解决方案1】：

我已经编辑了您的代码，请使用它，您的视频将在每个屏幕分辨率方面完美居中。

<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>

【讨论】：

非常感谢！我还有一个问题：一旦视频达到其最大尺寸，视频和页面上的其余内容之间就会开始出现很大的空间，因为它所在的 div 越来越大。你知道我是怎么解决的吗？
你能有任何我能看到的链接吗？
移除底部填充：56.25%；来自 div 的样式，我认为它会有所帮助。
这行得通，但它也使视频变成了一个狭窄的水平条。
为 div 添加高度。

【解决方案2】：

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

【讨论】：

另外，您的代码中有额外的引号，应删除从 width:560 开始的集合，并在 css 的末尾有两个结束集合。把其中一个拿出来。也不要在css中设置“宽度”两次。删除 560 像素，现在您将宽度设置为 100% 和 560 像素。
谢谢，刚试了！它裁剪了视频的两侧并将其移动到左侧。当我添加相应的最大高度时它有所帮助，但它仍然是合理的。你知道我是怎么解决的吗？
当你有position:absolute时，左右后面的数字是它离左右边缘的距离，所以你可以设置left:10;right:10;，让它在两边留一点空间。但只要这两个数字相等，它就会水平居中。将顶部和底部设置为垂直居中的相同数字。
谢谢！如果我添加left:[value]; right:[value];，它会将视频推到右侧，但它仍然没有居中。在较小的尺寸下，它会变成方形并切断右侧。还有什么我可以尝试的吗？