html - 视频部分设计未对齐

Question

我正在努力使视频部分看起来类似于下面的设计

我在右侧面临两个设计突破

缩略图没有填充“vp-hqdefault-w”，它显示了图像的一部分，其余部分被隐藏了。

其次，我无法将缩略图旁边的视频标题对齐，如图所示

<div class="container">


 <div class="row content">
    <div class="col-md-7 col-sm-6">
      <div class="active-iframe-wrapper video-embed-container">
          <iframe id='activeIFrame' class='active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/SCRUg5s389Q?showinfo=0&modestbranding=1" ></iframe>
       </div>

      <p>Title of the video</p>
    </div>


    <div class="col-md-5 col-sm-6">

       <a class="" href="http://www.youtube.com/embed/SCRUg5s389Q?showinfo=0&modestbranding=1">
      <div class="vp-video-img-w vp-hqdefault-w">
        <img src="http://img.youtube.com/vi/SCRUg5s389Q/hqdefault.jpg" title="">                                  
      </div>
        <div class="vp-video-details">
          <h3 class="video-title">Mr. Bean is back on the road One</h3>
        </div>
      </a>


      <a class="" href="http://www.youtube.com/embed/QThP5kDUJJ0?showinfo=0&modestbranding=1">
      <div class="vp-video-img-w vp-hqdefault-w">
        <img src="http://img.youtube.com/vi/QThP5kDUJJ0/hqdefault.jpg" title="">                                  
      </div>
        <div class="vp-video-details">
          <h3 class="video-title">Mr. Bean is back on the road Two</h3>
        </div>
      </a>

      <a class="" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
      <div class="vp-video-img-w vp-hqdefault-w">
        <img src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">                                  
      </div>
        <div class="vp-video-details">
          <h3 class="video-title">Mr. Bean is back on the road Three</h3>
        </div>
      </a>

    </div>

  </div>

Codepen link

我正在努力让它响应它而不会中断

Answer 1

您遇到此问题是因为您没有将 float:left 属性添加到视频缩略图 div。试试这个代码。

.vp-video-img-w {
    position: relative;
    overflow: hidden;
  float: left;
  margin-right: 10px;
  width: 30%;
}