Отзывчивый встроенный видеокодек YouTube не работает

Когда мое окно браузера сокращается, видео YouTube в моем основном div не сокращается с помощью браузера. Я пробовал код, который я нашел в Интернете, который собирался «решить» проблему, но она не получилась хорошо и выглядела неплохо. Моя самая большая проблема с ним заключалась в том, что видео никогда не останавливалось, когда окно браузера сократилось.Отзывчивый встроенный видеокодек YouTube не работает

Это код с сайта:

HTML:

<div class="video-container"> 
    <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>

CSS:

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

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

Вопрос: Кто-нибудь знает, как я могу иметь встроенный YouTube видео должно реагировать, оставаясь центрированным (как по вертикали, так и по горизонтали) в div, что находится в?

Вот мой код: http://jsfiddle.net/MyersAN/xk700bng/

источник

2015-07-29 Drew

использование относительного позиционирования –

Во-первых, вы указали свой iframe фиксированную ширину и высоту в вашем CSS, а во-вторых, код, вышедший выше, не равен даже вашему примеру скрипта – Turnip

, потому что он не работает для меня и так Я избавился от кода и сам пробовал, что было неудачей. но если бы я избавился от фиксированной ширины и высоты, как бы у меня был «размер по умолчанию» для него в div? – Drew

Я пытался с этим классом

.videowrapper { 
    float: none; 
    clear: both; 
    width: 100%; 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 25px; 
    height: 0; 
} 
.videowrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

и добавить div элемент с YouTube внедренного кода

<div class="videowrapper"> 
    <iframe width="560" height="349" src="link" frameborder="0" allowfullscreen></iframe> 
</div>

Он работает, и вы должны следовать this учебник с демо-кодом.

источник

2015-07-29 22:05:32

Отзывчивый встроенный видеокодек YouTube не работает

ответ

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