2015-07-31 5 views
0

У меня есть iFrame на моем сайте, который реагирует, однако при просмотре его на большинстве немобильных экранов он не соответствует размеру контейнера. Как я могу заставить iFrame растягиваться до размера контейнера или заставить контейнер не идти дальше моего максимального размера iFrames? Заранее спасибо.Отзывчивый iFrame не подходит для контейнера

Сайт Waterlessbuddys.com прокрутите вниз немного, и вы найдете iFrame.

.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%; 
 
}
<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>

+0

Что произойдет, если вы поместите ширину: 100% в фактическом теге iframe? – Whirlwind990

+0

Вы используете jQuery на сайте? Если это так, вы можете просто изменить размер ширины iframes при изменении размера окна – cfly24

ответ

0

enter image description here

Является ли это то, что вы хотите? Если это так, вы можете продолжить чтение ..

  1. набор <body> в IFRAME: style=margin:0
  2. набор <div itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject">: style=position:relative;display:block

Готово!

Смежные вопросы