Как убрать большой отступ (отступ) под видео встраивания? - PullRequest
Новая
       6

Как убрать большой отступ (отступ) под видео встраивания?

0 голосов
/ 25 ноября 2018

Формируется большой отступ под видео: https://screenshotscdn.firefoxusercontent.com/images/e8c751a1-34b3-4ca8-9130-ed78e6558b71.png

<div class="embed-responsive"><iframe src="https://www.youtube.com/embed/QILiHiTD3uc" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

@ media (min-width: 1200px) {

  .embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;  
  padding-bottom: 56.25%;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height:auto;
  width:auto;
  max-width: 80%;
  max-height: 80%;
  border: 0;
  padding-bottom: 10px;
}

}

При более низком разрешении стандартный код (без 80%) работает правильно: 

    .embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;  
  padding-bottom: 56.25%;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding-bottom: 10px;
}
...