в зависимости от того, ГДЕ вы вызываете этот сценарий, он может перезаписать существующий документ. Вообще говоря, именно поэтому следует избегать document.write - ну, и даже когда он работает, он вызывает «повторную обработку» документа, что может привести к увеличению времени загрузки страницы.
Поскольку все, что у вас есть, — это точки останова, и все эти iframe загружают один и тот же контент — в наши дни, если вы хотите создать адаптивный макет, это НЕ задача JavaScript!
Есть ДВА способа сделать это, первый — с помощью медиа-запросов:
HTML:
Код:
.responsiveFrame {
position:relative;
width:100%;
padding-bottom:75%;
}
.responsiveFrame iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Код (разметка): это то, что браузеры до CSS3 получают за размер. Он же IE8/раньше. НУ ЧТО Ж. Они до сих пор так хорошо снимают видео.
ЗАТЕМ этот CSS выполняет тяжелую работу.
<div class="responsiveFrame"> <iframe src="[URL='https://wmlogs.com/yti/PAbbAPTBodHRwczovL3lvdXR1YmUuY29tL2VtYmVkL1Y5VE90RGprN1FzP3Jl3Pz']https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0[/URL]" width="290" height="218" frameborder="0" allowfullscreen ></iframe> </div> Код (разметка): Или что-то в этом роде. Этот метод приличный, но не очень... эффективный с точки зрения автоматического изменения размера.
Второй метод, с которым я столкнулся совсем недавно, мне нравится больше, поскольку он дает вам бесконечные размеры, которые автоматически вписываются во все, во что вы их поместите. HTML просто получает дополнительный DIV:
@media (min-width:442px) { .responsiveFrame { width:400px; height:300px; } } @media (min-width:642px) { .responsiveFrame { width:600px; height:450px; } } @media (min-width:782px) { .responsiveFrame { width:740px; height:555px; } } Код (разметка): Приятная особенность CSS-элементов заключается в том, что объявления процентного заполнения основаны на ширине родительского элемента. Если мы абсолютно позиционируем IFRAME внутри DIV, установив для него значение и высоту на 100%, мы можем дополнить DIV снизу на процентную высоту, что всегда будет поддерживать правильный размер IFRAME.
<iframe src="[URL='https://wmlogs.com/yti/PAbbAPTBodHRwczovL3lvdXR1YmUuY29tL2VtYmVkL1Y5VE90RGprN1FzP3Jl3Pz']https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0[/URL]" width="290" height="218" frameborder="0" allowfullscreen class="responsiveFrame" ></iframe> Код (разметка): этот метод работает в большинстве браузеров, даже в старых. DIV расширится до ширины всего, что у вас есть внутри, нижнее дополнение увеличит высоту DIV до процента от этой ширины, а абсолютно позиционированный iframe внутри него будет масштабироваться до родительского контейнера.
Никаких скрипттардеров не нужно! Вероятно, будет работать как минимум до IE6.
В наши дни люди слишком быстро погружаются в JS. В 99,99% случаев, если это проблема с макетом,
НЕ ИСПОЛЬЗУЙТЕ JAVASCRIPT в качестве ответа!
