Question

我需要一个视频占据整个div的空间。它显示控件执行，但缩略图没有。任何人都有一些建议，或者有人能指出我正确的方向？

<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示例

<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示例

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

我希望这个答案可以帮到你。

你如何拍摄视频占据div的其余部分？

1 个答案: