Давайте рассмотрим, как на чистом CSS можно создать в колонку видео от Youtube, которое будет адаптивное, где корректно отражаться на всем мобильных носителей. Теперь можно создать некий вид материалов в колонку, что будет вместо картики в нашем случай идти плеер.
На примере мы наблюдаем 3 видело, где автоматически добавляем как материал.
HTML
Код
<div class="content">
<div class="video_block">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TjtYXGTlBjo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="video_block">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TjtYXGTlBjo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="video_block">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TjtYXGTlBjo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
CSS
Код
.content {
display:flex;
flex-flow: row wrap;
justify-content: space-between;
}
.video_block {
box-zising:border-box;
float:left;
margin:2% 1%;
width:48%;
position:relative;
height:0;
padding-bottom:27%; /* 9*80/16 proporcion 16:9*/
}
iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Демонстрация
