Mask Image ist in mobilen Browsern nicht sichtbar

#1
Hallo!
Ich habe auf der Seite anytime.money ein Bild mit "mask" bzw. "webkit-mask" über eine youtube playlist gelegt. Das ganze funktioniert eigentlich einigermaßen so wie ich mir das vorstelle, nur in mobilen Browsern fehlt das Überlagerungsbild komplett!
Hat da jemand eine Idee wo der Fehler liegen könnte?
Danke

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Any Time Money</title>

</head>

<body>

<div class="video-responsive" >
<iframe width="1600" height="900" src="https://www.youtube.com/embed/?listType=playlist&list=PLYN_YGZU26Uz6Fz5kf84RwNDqXXcAM-6P" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
      

<script language="javascript" type="text/javascript" src="http://www.anytime.money/javascript.js"></script>

</body>
</html>
CSS:
body {
  margin: 0;
  background: #000;
  overflow:hidden;
}



.video-responsive{
        position: relative;
    padding-bottom:45%;
    padding-top: 30px;
 
}
.video-responsive iframe{
    width: 100%;
    height: 100%;
    -webkit-mask-origin: url("atm-bar.png");
      mask-image: url("atm-bar.png");
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
    position:absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
 

Sempervivum

Well-Known Member
c-b Experte
#2
Also mein Browser (Opera) akzeptiert -webkit-mask-origin nicht, wohl aber -webkit-mask-image. Ist ersteres vielleicht veraltet, wird aber von manchen Desktop-Browsern noch unterstützt?
 
Oben