Как сделать адаптивным вставленное видео с YouTube?
Как сделать адаптивным видео, вставленное на сайт с YouTube?
Видео с YouTube, которое обычно вставляют с помощью вставки в html-код страницы готового фрейма, который копируют с YouTube, по умолчанию не является адаптивным. Для того, чтобы сделать такое видео адаптивным, т.е. чтобы оно менялось при изменении разрешения экрана на разных мониторах и гаджетах, необходимо такой видео-фрейм из YouTube стилизовать с помощью CSS.
Пример стилизации видео-фрейма с YouTube
.videowrap
{
max-width: 720px;
margin: 0 auto;
}
.videoblock
{
position: relative;
padding-bottom: 56.25%; /*для видео из соотношением экрана 16:9*/
height: 0;
overflow: hidden;
}
.videoblock iframe, object, embed
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Пример вставки видео-фрейма с YouTube
<h1>Заголовок видео</h1>
<div class="videowrap">
<div class="videoblock">
<iframe width="560" height="315" src="https://www.youtube.com/embed/FjM1dT2_JcE" allowfullscreen></iframe>
</div>
</div>
Попробуйте сами »Примечание. Значение padding-bottom: 56.25%; - используется при соотношении видео 16:9. Если соотношение сторон видео другое, то и это значение будет меняться. Считается как 9/16*100% = 56.25%. Если соотношение сторон видео 4:3, то получится 3/4*100% = 75%.
