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>

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

2 个答案: