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

我试图将三个视频嵌入到一个特定的结构中。左栏有一个视频，右栏有两个较小尺寸的视频，如下图所示：

我试着制作一个左栏和右栏，但有几个问题：我的左视频比我想要的要小得多，并且没有占据整个栏。第二个问题是，正确的视频比我希望的要长得多

.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>

.column{
边框：2件纯黑；
高度：自动；
位置：相对位置；
}
.列iframe{
宽度：85%；
高度：自动；
浮动：中心；
}
.列.左{
浮动：对；
宽度：60%；
}
.一栏.对{
浮动：左；
宽度：40%；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
} 

---

我目前的结果如前所述。如何解决这一问题？

您最好使用

flexbox

：

.wrapper{
显示器：flex；
}
.wrapper>.left{
弹性：1 055%；
}
.wrapper>。对{
弹性：0.45%；
显示器：flex；
弯曲方向：立柱；
}
.wrapper>.right>.vid wrapper{
显示器：flex；
}
.wrapper>.right>.vid wrapper>.video{
弹性：1 0 45%；
}
.wrapper>.right>.vid wrapper>.video>iframe{
最大宽度：100%；
}
.wrapper>.right>.vid wrapper>.info{
弹性：0.55%；
}

主要视频
描述
描述

您可以使用

网格

轻松实现这一点

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>

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