How to use a transparent Webm without a black background

Question

I want to embed a .webm video in my website. At first I used .gif, but I wanted to speed up my website, so I followed the advice from Lighthouse to use .webm in my website. This reduced the size enormous, but due to the lack of support on Ios/OSX/Safari, I show the .gif on that devices.

Webm is supported on chrome, on my desktop it shows perfectly. But when I view it on android in chrome the background of the video is black instead of transparent. You can view it here: https://codepen.io/Vendio-Websolutions/pen/jdpveV. I added buttons for different background colors to make the problem more clear.

html

<div class="buttons">
  <button id="blue">Make background blue</button>
  <button id="green">Make background Green</button>
  <button id="red">Make background red</button>
</div>

<div class="video-div">
  <video autoplay="" src="http://vendio.offline/wp-content/uploads/2019/01/webdevelopment.webm" alt="Webdevelopment" muted="" style="background-color: transparent; opacity: 1; filter: blur(0px); z-index: 1; display: inline;"></video>
</div>

css

.buttons {
  display: flex;
}
.buttons button {
  background: black;
  color: white;
  border: none;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
}.video-div {
  padding: 30px;
}

js

$("#blue").click(function(){
  $(".video-div").css("background-color", "blue");
});
$("#green").click(function(){
  $(".video-div").css("background-color", "green");
});
$("#red").click(function(){
  $(".video-div").css("background-color", "red");
});

I tried to use this script to detect the support for the transparent alpha layer: How to (feature) detect if browser supports WebM alpha transparency?. But this only detects if the browser supports .webm not if it supports tranparency.

Does anyone know how I can make the video transparent on chrome in Android. Or does anyone know a script to detect if alpha layers are supported?

How to use a transparent Webm without a black background

0 Answers0