Html 双栏视频浏览器

我有一个网站，有两个栏目，都是响应性的。每个div元素（左和右）中都有一个视频。在Safari和Firefox中一切正常，但在Chrome中则不然。你对如何在Chrome上工作有什么想法吗

HTML:

---

一些浏览器认为空白也是一个空间：

即使将两边的宽度用作

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，那就好了：

只需修改代码并为其提供链接。但是在chrome中？完成你的陈述@ManuelS。我很抱歉。在Chrome中，视频彼此重叠

.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;
}

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