IFrame Отзывчивый вопрос

Question

Как сделать IFRAME в отзывчив с полной шириной

iframe {position:absolute;top:0;left:0;width:100%; height:100%;} 
iframe, object, embed { 
    max-width: 100%; 
} 

Это мой код, но не работает

Примечание:

Если мы использовали высоту в пикселях (IFRAME Tag) затем поступает правильно в полной ширине. Но не работает в реагировании

Каково решение?

Answer 1

Я думаю, что это то, что вы ищете. Я предполагаю, что вы используете YouTube, поэтому просто вставьте ссылку для встраивания, где находится другая ссылка.

HTML

<div class="videoWrapper"> 
    <!-- Copy & Pasted from YouTube --> 
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe> 
</div> 

CSS

.videoWrapper { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.videoWrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

Я использовал это руководство: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Я использовал тот же метод для моего собственного веб-сайта и он прекрасно работает. Надеюсь, что это помогает вам!