Как использовать сетку для встраивания видео? - PullRequest
Новая
       7

Как использовать сетку для встраивания видео?

0 голосов
/ 29 апреля 2019

Я пытаюсь встроить три видео в определенную структуру. Там будет левый столбец с одним видео и правый столбец с двумя видео меньшего размера, как на этом изображении: https://i.imgur.com/1YpBbgI.png

Я попытался создать левый столбец и правый столбец, но есть несколько проблем: мое левое видео намного меньше, чем я хочу, и не занимает весь столбец. Вторая проблема заключается в том, что правильные видео намного длиннее, чем я хочу. 

.column {
  border:   2px solid black;
  height: auto;
  position: relative;
}

.column iframe {
  width: 85%;
  height: auto;
  float: center;
}

.column .left {
  float: right;
  width: 60%;
}

.column .right {
  float: left;
  width: 40%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
} 
   <div class="videos">
      <div class="row">
        <div class="column left">
             <iframe 
           src = "https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
           frameborder = "0"  allowfullscreen></iframe>
        </div>
        <div class="column right">
           <iframe 
           src = "https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
           frameborder = "0" allowfullscreen></iframe>
            <iframe 
           src = "https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
           frameborder = "0" allowfullscreen></iframe>
        </div>
      </div>
    </div>

Мои текущие результаты соответствуют описанным выше. Как это можно исправить?

Ответы [ 2 ]

1 голос
/ 29 апреля 2019

Вы можете использовать grid, чтобы легко достичь этого.

HTML 

<section class="video-container">
  <div class="video-large">
    <iframe></iframe> <!-- your video -->
  </div>
  <div class="video-small-top">
    <iframe></iframe> <!-- your video -->
  </div>
  <div class="video-small-bottom">
    <iframe></iframe> <!-- your video -->
  </div>
</section>

1007 * CSS * 

.video-container {
  display: grid;
  grid-template-columns: 66.6% 33.3%;
  grid-auto-flow: column;
}
.video-large {
  grid-column: 1;
  grid-row: 1 / 3;
}
.video-container iframe{ /*change according to your need*/
  min-width: 100%; 
  min-height: 100%;
  width: auto;
  height: auto;
}

Вот и все! Вот Пример

0 голосов
/ 29 апреля 2019

Вам может быть лучше использовать flexbox: 

.wrapper {
  display: flex;
}

.wrapper>.left {
  flex: 1 0 55%;
}

.wrapper>.right {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
}

.wrapper>.right>.vid-wrapper {
  display: flex;
}

.wrapper>.right>.vid-wrapper>.video {
  flex: 1 0 45%;
}

.wrapper>.right>.vid-wrapper>.video>iframe {
  max-width: 100%;
}

.wrapper>.right>.vid-wrapper>.info {
  flex: 0 0 55%;
}
<div class="wrapper">
  <div class="left">Main Video</div>
  <div class="right">
    <div class="vid-wrapper">
      <div class="video">
        <iframe src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="info">Description</div>
    </div>
    <div class="vid-wrapper">
      <div class="video">
        <iframe src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="info">Description</div>
    </div>
  </div>
</div>
...