html - 两栏视频 Chrome

Question

我有一个网站，其中有两列是响应式的。在每个 div 元素(左和右)中是一个视频。在 Safari 和 Firefox 中一切正常，但在 Chrome 中却不行。你对如何让它在 Chrome 中工作有什么想法吗？

https://jsfiddle.net/x1Lx9k5L/1/

HTML:

 <div class="left animated fadeInLeft" id="half_left">
            <a href="#"><video id="video-left" loop muted class="bildleft" src="img/video.mp4"></video></a>

CSS:

.left{
    background-color: #eee;
    width:50%;
    height: 100%;
    display: block;
    position: fixed;
    float:left;
    box-sizing: border-box;
    background-size:cover;
    background-position: center center; 
    top: 0; bottom: 0; left: 0;
    right: 50%;
}

.bildleft {
    float: left;
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

Answer 1

一些浏览器也将空白视为空格:

即使您使用两侧的宽度作为 50%，空白也可能会破坏聚会:因此请尝试删除空白，即

<div class="left animated fadeInLeft" id="half_left"> The embeded video here </div><div class="right animated fadeInRight" id="half_right">  The embeded video here  </div>

在图片中

还有一点。因为您希望 div 在一起。如果您将所有 div 都 float 到左侧，甚至是右侧的 div，那就更好了: