如何使用网格结构嵌入视频？

Question

我正在尝试将三个视频嵌入到某个结构中。左侧列中包含一个视频，右侧列包含两个较小尺寸的视频，如下图所示：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>

我目前的结果如前所述。怎么解决这个问题？

Answer 1

您可以使用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>

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;
}

而已！这是一个Example

Answer 2

使用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>