Отзывчивый iFrame

Я стараюсь получить отзывчивый iframe, но пока ничего. Я использую следующие css и html.thanks заранее.Отзывчивый iFrame

.testme_container { 
 
position: relative; 
 
height: 0; 
 
overflow: hidden; 
 
} 
 
    
 
.testme_container-16x9 { 
 
padding-bottom: 56.25%; 
 
} 
 
    
 
.testme_container-4x3 { 
 
padding-bottom: 75%; 
 
} 
 
    
 
.testme_container iframe { 
 
position: absolute; 
 
top:0; 
 
left: 0; 
 
width: 100%; 
 
height: 100%; 
 
}

<div class="testme_container"> 
 
<iframe src="http://www.gmail.com" allowfullscreen></iframe> 
 
</div>

источник

2015-01-18 Makis Kahrimanidis

Извините, но «пока ничего» не является очень хорошим описанием проблемы. Можете ли вы указать, чего вы пытаетесь достичь, и что происходит вместо этого? –

Думаю, я уже сделал .. пытаясь достичь отзывчивого iframe .. но, к сожалению, не работает .. какое описание вы ожидаете. Если вы запустите фрагмент, вы увидите, что ничего не происходит ... :(Дайте мне знать, как я могу обратитесь к моей проблеме лучше, и я обязательно буду уверен :) спасибо –

Не могли бы вы попытаться объяснить в деталях, что вы хотите достичь?

Я попробовал ваш код и, судя по именам ваших классов CSS (16x9, 4x3), кажется, работает хорошо, однако, вам придется использовать другой URL, чтобы проверить:

<div class="testme_container testme_container-4x3"> 
     <iframe src="http://www.w3schools.com/" allowfullscreen></iframe> 
</div>

DEMO

Причина, по которой www.gmail.com не отображается, поскольку Google не позволяет ее отображать в iframe. Если вы посмотрите на jsfiddle, вы можете видеть, я ничего не изменил о вашем коде, кроме ссылки, и добавил класс «testme_container-4x3».

источник

2015-01-18 08:40:41 itd

О, я вижу! Но я помещаю gmail только для того, чтобы доказать свою точку зрения, а не то, что я буду использовать эту ссылку. Когда я попытался с другой ссылкой, она тоже не работала. Ну, так или иначе, я думаю, что я хочу разместить iframe на веб-сайте, который может быть отзывчивым. Без границ нет необходимости прокрутки, если вы смотрите на планшетные телефоны или разные разрешения и т. Д. ... –

Вы говорите о полосе прокрутки главной страницы или полосе прокрутки iframe? Если вы говорите о полосе прокрутки главной страницы, вы на правильном пути. К сожалению, изменение размера iframe в соответствии с его размером немного сложнее, я даже не уверен, что это можно сделать. – itd

OOOOOHHHHH теперь я понимаю ... Ну, в любом случае, ребята, я абсолютно глупый, я думаю .. iframe реагирует, но я думал, что могу вмешиваться и в содержание веб-сайта, которое я буду использовать в iframe ... PFFFffffffff !! ! извините, парни за то, что тратили ваше время: P спасибо –

Эта функция JavaScript основана на jQuery, чтобы сделать все iframes на странице чувствительными. Он обрабатывает видеоизображения, чтобы сохранить их соотношение сторон без дополнительного вертикального или горизонтального поля, но вам необходимо определить соотношение сторон, которое вы будете использовать во встроенном видео.

https://gist.github.com/dylanvalade/b2ba4eaa99ae7968cfd8

источник

2015-09-09 16:43:07

Вы действительно можете сделать это в родном JavaScript без необходимости полагаться на JQuery или других рамок/библиотеки. Responsive Iframes будет отлично работать для этого.

источник

2016-07-31 02:34:22

Отзывчивый iFrame

ответ

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