Responsive Video Container -> без проблем ширины / высоты - PullRequest
Новая
       7

Responsive Video Container -> без проблем ширины / высоты

0 голосов
/ 25 мая 2018

У меня есть таблица стилей для адаптивных вставок видео на YouTube: 

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 30px; 
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Это работает как шарм.Теперь я завернул это в div со следующими классами, такими как: 

.blog-wrapper > .blog-row > .blog-column

Когда я использую класс .video-container в .blog-column, он больше не работает, но получает размеры 0 x 30Когда я помещаю .video-container в .blog-row или .blog-wrapper, он снова работает, но это явно не соответствует макету.

Как я могу заставить .video-container работать в .blog-columnбез изменения: 

.blog-wrapper .blog-row .blog-column

, потому что изменения там также повлияют на остальную часть страницы.

Еще немного CSS: 

.blog-column {
  max-width: 590px;
  display: inline-block;
  padding-right: 10px;
  vertical-align: top;
  margin: 15px 0;
}

Я не нашел ни одногоcss для .blog-wrapper и .blog-row, они содержат только css для элементов внутри классов, поэтому я не включил их здесь.

Некоторый HTML-код для воспроизведения: 

<div class="blog-row">
<div class="blog-column">
<p class="title">Lorem ipsum dolor</p>
<p class="description" style="text-align: justify;">Lorem ipsum dolor sit 
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
</p>
<p class="link"><a href="some dead link">this is a dead link</a></p>
</div>
<div class="blog-column">
<div class="video-container"><iframe frameborder="0" height="315" 
src="https://www.youtube.com/embed/z8Zj7aVrt4M?ecver=1" width="560"> 
</iframe></div>
</div>
</div>

https://jsfiddle.net/cLmoa58o/

1 Ответ

0 голосов
/ 25 мая 2018

Просто установите width: 100% на .blog-column :) Обновленная скрипка: https://jsfiddle.net/y2q9L125/

...