Внедрить YouTube высоту видео проблема - PullRequest
Новая
       11

Внедрить YouTube высоту видео проблема

1 голос
/ 02 июля 2019

Я пытаюсь встроить видео YouTube в свой проект, оно работает, и я также попытался применить соотношение 16: 9 с padding-bottom: 56.25%, как в большинстве учебных пособий.

Проблема в том, что высота видео составляет 100% от контейнера. Что я должен исправить в своем CSS, чтобы избавиться от верхней / нижней черной полосы?

Вот моя попытка ввода кода: https://codepen.io/DieByMacro/pen/QXmJez

.HomePage-homeVideoWrapper-274 {
  height: 0;
  margin: auto;
  z-index: 1;
  position: relative;
  max-width: 720px;
  padding-top: 25px;
  padding-bottom: 56.25%;
}
.HomePage-homeVideoWrapper-274 iframe {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  position: absolute;
}
<div class="HomePage-homeVideoWrapper-274">
  <iframe height="auto" src="https://www.youtube.com/embed/Qjmp2r2OsZ4" title="Home-admin tutorial" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>

1 Ответ

2 голосов
/ 02 июля 2019

Это очень распространенная проблема, с которой мы сталкиваемся при добавлении видео в наш шаблон. Вам просто нужно добавить свойство max-width и width в OUTER div, а не в HomePage-homeVideoWrapper- 274 . Не нужно добавлять максимальная высота в HomePage-homeVideoWrapper-274. 

.outer {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}
.HomePage-homeVideoWrapper-274 {
    height: 0;
    margin: auto;
    z-index: 1;
    position: relative;
    padding-top: 25px;
    padding-bottom: 56.25%;
    display: block;
    overflow: hidden;
  
  iframe {
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    position: absolute;
  }
}
<div class="outer">
   <div class="HomePage-homeVideoWrapper-274">
  <iframe src="https://www.youtube.com/embed/Qjmp2r2OsZ4" title="Home-admin tutorial"></iframe>
</div>
</div>

Демо

...