Резиновое видео

370

30 декабря 2016, 10:05

Есть такая структура страницы:

Нужно адаптировать под 3 разрешения экрана: 1920x1080 and 2160x1440 and 2736x1574 Проблема в том, что видео нужно растянуть на максимальную ширину и высоту, но оставить место под меню, а значит -250px. Также видео может быть рандомных разрешений, поэтому если растягивать и получится "не красиво" - не имеет значения. Лишь бы растянулось :)

Вот ссылка. Спасибо.

Answer 1

body{ 
  margin: 0; 
} 
 
.menu{ 
  background-color: gray; 
  height: 250px; 
} 
 
.video{ 
  width: 100%; 
  height: calc(100vh - 250px); 
}

<div class="menu"> 
 250px 
</div> 
<iframe src="https://www.youtube.com/embed/w6DW4i-mfbA" frameborder="0" allowfullscreen class="video"></iframe>

Если вам нужна реализация конкретно под ваш случай, то используйте

.video-container { overflow: hidden; }

#video { min-width: 100%; min-height: 100%; }

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как создать блоки в модальном окне?

У меня есть галерея картинок в модальном окне, под каждой из них нужно вставить описание(не короткое), на сайте который я взял в пример картинку...

335

HTML

Резиновое видео

Как создать блоки в модальном окне?

Как лучше верстать?

Nullreference ошибка в xamarin android amazon s3, как испаравить?

Как поменять алгоритм шифрование в AsymmetricAlgorithm