Видео YouTube вставляется через iframe, но он не адаптивен по высоте. Если задать width="100%", то он растянется на всю ширину родителя, но для высоты hight="100%" не работает. Это ведет к тому что на мобильных блок слишком высокий с черными отступами.
Далее приведено несколько примеров как это исправить, а также вывести несколько блоков в одну линию.
<div class="video">
<div class="video-wrp">
<iframe width="560" height="315" src="https://www.youtube.com/embed/7Ing1lOzmGA"></iframe>
</div>
</div>.video {
margin-bottom: 20px;
}
.video-wrp {
position: relative;
padding-top: 56.25%;
}
.video-wrp iframe {
width: 100%;
height: 100%;
display: block;
position: absolute;
margin: 0;
top: 0;
left: 0;
border: none;
}Если сайт «резиновый», то лучше задать максимальную ширину видео в 800-1000px и отценровать, чтобы оно не было слишком большим. В примере максимальная ширина 600px.
.video {
max-width: 600px;
margin: 0 auto 20px;
}
.video-wrp {
position: relative;
padding-top: 56.25%;
}
.video-wrp iframe {
width: 100%;
height: 100%;
display: block;
position: absolute;
margin: 0;
top: 0;
left: 0;
border: none;
}<div class="video_2">
<div class="video_2-row">
<div class="video_2-col">
<div class="video_2-wrp">
<iframe width="560" height="315" src="https://www.youtube.com/embed/7Ing1lOzmGA"></iframe>
</div>
</div>
<div class="video_2-col">
<div class="video_2-wrp">
<iframe width="560" height="315" src="https://www.youtube.com/embed/E6TUs69Cw94"></iframe>
</div>
</div>
</div>
</div>.video_2 {
overflow: hidden;
}
.video_2-row {
margin: 0 -10px 0 -10px;
}
.video_2-col {
float: left;
width: 50%;
margin-bottom: 20px;
}
.video_2-wrp {
position: relative;
padding-top: 56.25%;
margin: 0 10px 0 10px;
box-sizing: border-box;
}
.video_2-wrp iframe {
width: 100%;
height: 100%;
display: block;
position: absolute;
margin: 0;
top: 0;
left: 0;
border: none;
}При ширине окна <= 800px вывод в одну колонку:
@media screen and (max-width:800px){
.video-col {
width: 100%;
}
}<div class="video_3">
<div class="video_3-row">
<div class="video_3-col">
<div class="video_3-wrp">
<iframe width="560" height="315" src="https://www.youtube.com/embed/7Ing1lOzmGA"></iframe>
</div>
</div>
<div class="video_3-col">
<div class="video_3-wrp">
<iframe width="560" height="315" src="https://www.youtube.com/embed/E6TUs69Cw94"></iframe>
</div>
</div>
<div class="video_3-col">
<div class="video_3-wrp">
<iframe width="560" height="315" src="https://www.youtube.com/embed/qJRfbzfYzEc"></iframe>
</div>
</div>
</div>
</div>.video_3 {
overflow: hidden;
}
.video_3-row {
margin: 0 -10px 0 -10px;
}
.video_3-col {
float: left;
width: 33.3%;
margin-bottom: 20px;
}
.video_3-wrp {
position: relative;
padding-top: 56.25%;
margin: 0 10px 0 10px;
box-sizing: border-box;
}
.video_3-wrp iframe {
width: 100%;
height: 100%;
display: block;
position: absolute;
margin: 0;
top: 0;
left: 0;
border: none;
}При ширине от 1200px вывод в две колонки, от 800px – в одну:
@media screen and (max-width:1200px){
.video_3-col {
width: 50%;
}
}
@media screen and (max-width:800px){
.video_3-col {
width: 100%;
}
}
