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的width和height属性不会覆盖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'});
});

Answer 2

为该iframe提供ID并尝试

#iframe_id{
height: 200px;
width: 200px;
}

或

#iframe_id{
height: 200px !important;
width: 200px !important;
}

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

2 个答案: