CODEWITHSUNDEEP
csshtmlgoogle-chromehtml5-video
MaximeDesRoches
MaximeDesRoches

Reputation: 110

Fixing an issue with video overlapping in Chrome

When animating a fullscreen video background, I found that if two <video> tags overlap, while translated with a transform, in Chrome on OSX, the one under becomes darker. It's working perfectly in other browsers and on 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>

I've recreated the issue here: https://jsfiddle.net/2angdzzy/

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

Upvotes: 4

Views: 451

Answers (1)

grmmph
grmmph

Reputation: 781

This is a strange issue indeed. I've found out that if you change the video file format to ogg, this does not happened. Perhaps you should try other HTML supported media formats for further investigation.

Here's your updated Fiddle.

Nevertheless, the best way to include an HTML video is with multiple formats for better compatibility.

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

Upvotes: 1

Related Questions