Как встроить портретное видео в div? - PullRequest
Новая
       53

Как встроить портретное видео в div?

0 голосов
/ 01 мая 2020

Я пытаюсь создать страницу HTML для проекта, который я создал. Я хочу, чтобы 75% экрана слева отображал текст, а остальные 25% страницы справа - для воспроизведения видео на YouTube, которое находится в портретном режиме.

HTML Код: 

      <div class="container-fluid">
          <div class="row">
              <div class="col-8">
                  <div class=" jumbotron">
                    <h1 class="display-4">TEST</h1>
                      <p>TEST</p>


                      <p>TEST</p>


                      <p>TEST</p>

                      <p>TEST</p>

                      <p>TEST</p>
                </div>
            </div>
            <div class="col-4">
              <div class="video">
                <iframe src="https://www.youtube.com/embed/PLONFeQSyhU?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
              </div>
            </div>
          </div>
      </div>

CSS Код: 

    <style>
      .col-4{
        padding: 0;
      }
      .col-8{
        padding: 0;
      }
      .video {
        position: absolute;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        background-size: cover;
        overflow: hidden;
      }
    </style>

Это вывод:

Output Как вы можете видеть видео не полностью заполняет div. Видео также не воспроизводится, и при этом оно не кликабельно, оно действует как изображение. Я хочу, чтобы видео на YouTube (чтобы оно работало) полностью заполнило родительский div без каких-либо утечек, и я хочу, чтобы div был высотой дисплея (100vh), как я могу это сделать?

Спасибо

...