jquery - 覆盖 iframe 的 CSS 高度 0 和宽度 0

Question

一个 WordPress 主题的特定样式表文件具有以下代码

.padder iframe {
  height: 0;
  width: 0;
}

我试图在自定义 CSS 文件中覆盖它以显示嵌入的视频 <iframe>具有高度和宽度属性的标签。

<iframe src="...." width="600" height="338" frameborder="0" title="...." webkitallowfullscreen mozallowfullscreen allowfullscreen>

我试过了 auto对于 height和 width但这会使 iframe 变小。

如果这在 CSS 中是不可能的，我准备尝试 jquery 解决方案。

Answer 1

iframe 的宽度和高度属性不会覆盖 CSS 的。试试这个:

<iframe style="width: 600px; height: 338px" ...

如果这不起作用，请发布您尝试过的 CSS 覆盖并检查是否在您的 CSS 之后加载了 0 高度/宽度(尝试使用 Firefox 或 Chrome 开发工具)

您是否考虑过最小宽度和最小高度？

如果一切都失败了，一个 jQuery 解决方案:

jQuery('iframe').each(function() {
    var $this = jQuery(this);
    var w = $this.prop('width');
    var h = $this.prop('height');
    $this.css({width: w + 'px', height: h + 'px'});
});