safari浏览器我的视频文件宽度100%之后高度竟然是屏幕的宽度,除了设置死的其他方式都不好使,哪位大神能解决一下

[恍若浮云]

<style>
.video{background: transparent url('img/top_banner_bg.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% auto;
}
</style>
<div class="top_video" style="">
<video class="video" poster="/images/video_bg.png" controls style="">
<source src="/images/top.mp4" type="video/mp4" style="">
<source src="movie.ogg" type="video/ogg" style="">
您的浏览器不能使用最新的视频播放方式呢
</video>
<script>plyr.setup();</script>
</div>




在浏览器上不管背景图还是视频上下都会出现空白,很恶心!!!