兩欄視頻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

回答

相關問題