HTML5 video标签问题及去除黑边

最近接到新需求 需要在在页面上展示一些视频，因此进行了汇总

先说说video的一些基本属性
autoplay 视频在就绪后自动播放。
controls 显示控件，比如播放按钮。
height 设置视频播放器的高度。
width 设置视频播放器的宽度。
loop 循环播放
muted 视频的音频输出静音。
poster 视频加载时显示的图像，或者在用户点击播放按钮前显示的图像。
src 要播放的视频路径。

属性完了看代码和效果

<video  autoplay="autoplay" controls="controls" loop="loop"> <source src=".ideo/demo_hammer_have_gloves.mp4" type="video/mp4">
</source>
<video>
                

视频加载成功后有黑边就比较难受 教大家如何去除黑边

video{
width: 100%;
height: 100%;
object-fit: contain;
}
video:focus {
outline:none;
}