两栏视频Chrome

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

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

来源

2016-03-06 Manuel S.

只需拨动代码并提供一个链接即可。 – mehulmpt

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

但在铬？完成您的声明@ManuelS。 –

一些浏览器认为空格也作为一个空间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>

在图片

另一件事。因为你会希望divs在一起。如果你将所有的div都浮动到左侧，即使是在右侧：

来源

2016-03-06 12:59:32

两栏视频Chrome

回答

相关问题