Масштабирование iframe для правильной установки

Итак, я использую iFrame в своем website, чтобы отобразить видео, и я положил его в div, чтобы разрешить изменение размера на мобильных стилях и просто сделать его более отзывчивым и т. Д. Однако теперь, если монитор является небольшим, содержимое ниже iframe отключается.Масштабирование iframe для правильной установки

Вот код для фрейма:

<div class="wrapper"> 
<iframe src="https://player.vimeo.com/video/132695239?badge=0" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div> 
<style> 
.wrapper { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.wrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
</style>

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

Благодаря

Edit: Вот код для DIV, что я пытаюсь масштабировать. Ширина не изменяется при уменьшении страницы, и поэтому высота также не изменяется. Любые идеи?

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

источник

2015-07-13 dwinnbrown

Я еще не пробовал, но вы можете взглянуть на http://embedresponsively.com/ – bmurauer

@bmurauer за предложение, но он в основном делает то же самое, и проблема не решена. Я не могу прокрутить вниз. – dwinnbrown

Вы хотите иметь только видеодисплей на маленьком экране? Или все, включая название? – NateW

Проблема в том, что Ваша обертке ДИВ .splash-page .main-wrap установлен в position: absolute; и overflow-y: hidden; это не позволяет ДИВУ расти, чтобы соответствовать всему своему содержимому.

Если изменить CSS включить что-то вроде этого:

.splash-page .main-wrap { 
    overflow-y: visible; 
    position: relative; 
}

Это позволит ДИВ расти, чтобы вместить все материалы.

Вы также можете обернуть все это в медиа-запросе, если хотите просто настроить таргетинг на определенную ширину.

@media all and (min-width: 1001px) { 
    ... 
}

В настоящее время вы также дублирующий фон вопрос, потому что вы используете .wsite-background как на DIV и ваше тело тега. Если вы удалите этот класс из тега тела, он должен выглядеть лучше.

источник

2015-07-13 13:56:49 NateW

Спасибо, я только что обнаружил, что в моем коде несколько минут назад, но будет отмечен как правильный для других пользователей здесь. – dwinnbrown

Не могли бы вы представить, как масштабировать div, отображающий iframe? Я добавлю код div выше. – dwinnbrown

@dwinnbrown ваш iframe действует отзывчивый для меня ... (Safari и Chrome проверен) Какой браузер вы используете? – NateW

Ваш iframe имеет фиксированный с. Попробуйте использовать ширину = «100%» вместо ширины = «960»

источник

2015-07-13 14:04:16

Масштабирование iframe для правильной установки

ответ

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