自动显示列上的视频高度

Question

我想在同一行显示两个不同尺寸的视频。我试着自动调整高度，这样就不会有奇怪的间隙(就像在图1中一样)。

图片:https://i.stack.imgur.com/4QK1U.jpg

我已经尝试过flex显示的东西，但没有成功。我当前的设置是:

<div class="row">
<div class="col-sm block-element-left">
<video class="rc" autoplay="autoplay" loop="loop" muted="muted" playsinline>
<source type="video/mp4" src="video1.mp4">
</video>
</div>
<div class="col-sm block-element-right">
<video class="rc" autoplay="autoplay" loop="loop" muted="muted" playsinline>
<source type="video/mp4" src="video2.mp4">
</video>
</div>
</div>
<style>
.block-element-right {
padding-left: 10px;   
}
.block-element-left {
padding-right: 10px;   
}
.rc{
-moz-border-radius:20px;
border-radius:20px;
overflow:hidden;
cursor: pointer;
z-index: -1;
width: 100%;
}
.col-sm {
padding: 0%;
position: relative;
}
</style>
```

Answer 1

尝试在video-tag

内设置宽度和高度

<div class="col-sm block-element-left">
<video width="420" height="340" autoplay="autoplay" loop="loop" muted="muted" 
playsinline>
<source  src="movie.mp4" type="video/mp4">
</video>
</div>