• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать адаптивные видео в колонку на Youtube (Как сделать адаптивное видео в колонку для плеера Youtube)
Создать адаптивные видео в колонку на Youtube
Kosten
Дата: Четверг, 2021-04-29, 20:42 | Сообщение 1
Оффлайн
Администраторы
Сообщений:34837
Награды: 65


Давайте рассмотрим, как на чистом 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%;
}


Демонстрация
Прикрепления: 4554114.png(471.8 Kb) · youtube-videos.zip(2.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать адаптивные видео в колонку на Youtube (Как сделать адаптивное видео в колонку для плеера Youtube)
  • Страница 1 из 1
  • 1
Поиск: