Як зробити адаптивним вставлене відео з 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%.
