Youtube iframe - увеличить, чтобы заполнить все пространство - PullRequest
Новая
       10

Youtube iframe - увеличить, чтобы заполнить все пространство

0 голосов
/ 04 июня 2019

Я хочу создать своего рода баннер на моей веб-странице с видео YouTube в качестве фона, который должен занимать весь iframe из стороны в сторону (растяжение видео и потеря некоторых фрагментов были бы приемлемы). Что-то вроде background-size: cover; подойдет. Я попробовал это , но в моем случае это не совсем работает (я вижу только очень маленькую полоску видео), вероятно, потому что формат моего iframe немного экстремальный. 

<header id="banner">
    <div class="overlay">
        <iframe src="https://www.youtube.com/embed/N9Y86YCRRDg?&amp;autoplay=1&amp;loop=1&amp;playlist=N9Y86YCRRDg&amp;rel=0&amp;controls=0&amp;mute=1" width="100%" height="315"></iframe>
    </div>
</header>

1 Ответ

0 голосов
/ 04 июня 2019

Это работает в codepen , используя предоставленный вами пример, хотя некоторые кадры отсечены в видео (эффект кадра);

html 

  <div class="video-background">
    <div class="video-foreground">
      <iframe src="https://www.youtube.com/embed/N9Y86YCRRDg?&amp;autoplay=1&amp;loop=1&amp;playlist=N9Y86YCRRDg&amp;rel=0&amp;controls=0&amp;mute=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>

css 

* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}
...