响应式iFrame不适合容器

时间：2015-07-31 00:31:01

标签： html css iframe containers

我的网站上有一个响应式的iFrame，但是在大多数非移动屏幕上查看它时，它不适合容器的大小。我如何让iFrame伸展到容器大小或让容器不要超过我的iFrames当前最大尺寸？提前谢谢。

网站Waterlessbuddys.com稍微向下滚动，您会找到iFrame。

＆＃13;
＆＃13; 
.embeded-video {
    position: relative
}

.embeded-video .ratio-img {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.embeded-video IFRAME {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
＆＃13; 
<div class="embeded-video">
    <img class="ratio-img" src="http://placehold.it/16x9" alt="16:9 Image" />
    <iframe src="http://abc11.com/video/embed/?pid=835255"></iframe>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

enter image description here

这是你想要的吗？ 如果是这样，你可以继续阅读..

  1. 在iframe中设置<body>：style=margin:0
  2. 设置<div itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject">：style=position:relative;display:block

    3. 完成！

相关问题
最新问题