Fix video overlap issues in Chrome

Question

When animating a full-screen video background, I found that if two tags <video>overlap, and when translated from transform, in Chrome OSX, the one below becomes darker. It works great in other browsers and in Chrome for Windows.

video {
  width: 640px;
  height: 320px;
  display: block;
}

.top {
  position:relative;
  transform: translate(0,0);
  transition: transform 1s ease;
}

.bottom {
  position:relative;
  transform: translate(0,10px);
  transition: transform 1s ease;
}

.over:checked ~ .top {
  transform: translate(0, 10%);
}

Over <input class="over" type="checkbox">
<video class="top" src="http://techslides.com/demos/sample-videos/small.mp4" autoplay loop></video>
<video class="bottom" src="http://techslides.com/demos/sample-videos/small.mp4" autoplay loop></video>

Run code

I recreated the problem here: https://jsfiddle.net/2angdzzy/

Is there any workaround for this problem, or has any of you seen or fixed this problem?

Answer 1

. , ogg, . , HTML .

Fiddle.

, HTML- .

<video width="320" height="240" controls>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
   Your browser does not support the video tag.
</video>