html - 你如何让视频占据剩余的 div？

Question

我需要一个视频占用整个div的空间。它表明控件可以，但缩略图没有。任何人有一些建议，或者有人可以指出我正确的方向吗？

http://puu.sh/x6cUl/1b77983418.jpg

<div class="row videoRow hidden-sm-down">
  <div class="col-8">
            <video class="bigVideo" src="Myvid.m4a" allowfullscreen controls></video>
        </div>
        <div class="col-4">
            <div class="col-md-12 col-sm-6" style="margin-bottom: 2vw;">
                <video class="smallVideo" src="Myvid2.m4a" allowfullscreen controls></video>
            </div>
            <div class="col-md-12 col-sm-6" style="margin-top: 1vw;">
                <iframe class="smallVideo" src="Myvid3.m4a" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
</div>

这是CSS

.front-page .videoRow {
  padding: 20px;
}
.front-page .bigVideo, .front-page .smallVideo {
  border: black 2px solid;
}
.front-page .bigvideomobile {
    display: block;
    margin: auto
}
.front-page .bigVideo {
  width: 60vw;
  height: 30vw;
}
.front-page .smallVideo {
  width: 30vw;
  height: 14vw;
}

Answer 1

HTML Example

<div class="container">
  <div class="left-container">
    <!-- Large Moive -->
    <video class="bigVideo" src="Myvid.m4a" allowfullscreen controls></video>
  </div>
  <div class="right-container">
    <!-- Small Moive 1 -->

    <!-- Small Moive 2 -->
  </div>
</div>

CSS Example

.container{
  display: flex;
  flex-direction: row;
  width: 800px;
  height: 300px;
  border: 2px solid black;
  align-items:center;
  justify-content: space-around;
}
.left-container{
  width: 500px;
  height: 280px;
  border: 2px solid black;
}
.right-container{
  width: 280px;
  height:280px;
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
}

video{
  width: 100%;
  height: 100%;
}

此代码只是示例代码。

重点是使用 display flex。

希望这个回答能帮到你。