CSSでの動画のマスク処理

CSSで動画のマスク処理を考えています。

具体的には
https://www.rondomark.jp/
のように背景のブロックがあり、その中にdivで括った動画をvideoタグで読み込み、それを
CSSでマスク処理をするということを考えていますが、
Chromeはローカルでも動作し、FireFoxはサーバに乗せたら動いたのですが、
Edgeは一部挙動がおかしいところはありますが、調整はできそうです。
IE11が上手くいかず教えていただければ幸いです。

下記のようなコードで試しています。

【HTML】

<div class="main">
<div class="video_box">
<video class="movie video active" loop="" preload="true" autoplay="autoplay" muted="muted" playsinline="" webkit-playsinline="" width="xxx" height="xxx" src="xxx.mp4"></video>
</div>
</div>

【CSS】
.main{
width: xxxpx;
height: xxxpx;
background: url(xxx.jpg) no-repeat center center;
}

.video {
-webkit-mask-image:url(xxx.svg);
mask-image: url(xxx.svg);
mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position:left top;
mask-position:left top;
-webkit-mask-size: contain;
mask-size: contain;
position: absolute;
}

No.1 ベストアンサー 回答者： fujillin 回答日時： 2019/11/01 09:51

こんにちは

＞IE11が上手くいかず教えていただければ幸いです。
原因は、単純にIEがmask-imageに対応していないということでしょう。
https://caniuse.com/#search=mask-image


簡単に試してみただけですが、代替案になりそうな例を一つ挙げておきます。

別にマスクレイヤを作成して、そのまま重ねれば、ほぼ同様の効果が得られるものと思われます。
HTMLに、あまり意味のないレイヤ要素を作成するのが嫌であれば、.mainをposition:relativeなどにしておいて、.video_box::afterをposition:absoluteでレイヤ代わりにすればマスクレイヤとして使えます。
（Chromeで試したところ、.video::afterではうまくいきませんでした）
ただし、mask-imageの場合と、上記のレイヤの場合では透明/不透明の部分の扱いが逆になりますのでご注意ください。

また、IEは背景画像のSVGにも対応していないようですので、背景画像でマスクする場合は通常画像(gif、pngなど）を利用するか、あるいは、::afterではなくマスク用の要素をHTML内に作成するといった調整が必要かも知れません。

この回答へのお礼

ありがとうございます。

png等で代替できないか試してみます。
一旦GIFを使ってIE11は凌ぎましたが、
今後も踏まえてご提示の方法を少し時間をとって検証してみようと思います。

お礼日時：2019/11/05 10:02