Создание видео в Iframe отзывчивом

Question

У меня есть сайт Wordpress, на котором я разместил iframe. В этом Iframe я потоковое видео. Это все хорошо и хорошо, но когда я пробую сайт на моем Iphone (не андроид), iframe имеет ширину huuuuge. Я пробовал:

width: auto; 

Это результаты не дают никаких результатов.

Сайт http://www.bubbels-lelystad.nl/broadcast-live/ и код, который я использую:

< iframe src="http://client.branchechannel.com/?id=0ff39bbbf981ac0151d340c9aa40e63e" frameborder="0" style="border: 0; width: 1100px; height: 600px;"></iframe> 

Answer 1

<div class = "video-container"> 
<iframe src="http://client.branchechannel.com/?id=0ff39bbbf981ac0151d340c9aa40e63e" height="600px" width="1100px" allowfullscreen="" frameborder="0"> 
</iframe> 
</div> 

IFrame является одним из элементов HTML, которые не играют хорошо с адаптивным дизайном. Лучшим способом для встроенного контента является создание обертки вокруг него.

это CSS: Вы можете настроить его по своему вкусу, но это, кажется, адаптироваться к различному размеру экрана

.video-container { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 35px; 
height: 0; 
overflow: hidden; 
} 

.video-container iframe { 
position: absolute; 
top:0; 
left: 0; 
width: 100%; 
height: 100%; 
} 

обивка-сверху/снизу вы можете настроить по своему вкусу. Это основано на соотношении сторон видео.