clip-pathをvideoに直接指定すると、Safariでは表示されなくなった件

2023.06.21
CSS wordpress

表題の通りで、ほぼ解決している記事なのですが、解決策にたどり着くまで少し苦労したので備忘録として残しておきます。

1. 表示されなかったソース
- - 1.0.1. html
  - 1.0.2. CSS
2. Safariでも表示されたソース
- - 2.0.1. CSS

表示されなかったソース

今回のケースは、html内にsvgタグを使って切り抜き型のSVGを貼り込み、それをCSSのclip-pathでID指定して、自動再生の動画を切り抜くというものです。因みにSafariで表示されなかったソースは、以下になります。動画の貼り込みはブロックエディターで行っています。

html

<svg version="1.1" height="0" width="0" viewBox="0 0 500.5 294.8" class="shape"><defs><clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<path transform="scale(0.0019,0.0033)" d="M142.1,2.8C73.6,14.8,13.3,62.4,1.4,131.4c-10.7,62.1,39.8,107.9,89.5,124c72.1,23.5,199.3,45.5,252.2,37.9
	c148.6-21.5,231.8-241.8,66.6-249.7C278.6,37.3,227.2-12.1,142.1,2.8z"/></clipPath></defs></svg>

<figure class="wp-block-video aligncenter mov-clip"><video autoplay loop muted poster="ポスター画像URL" preload="auto" src="動画URL" playsinline></video></figure>

CSS

.mov-clip video{
-webkit-clip-path:url(#svgPath);
  clip-path: url(#svgPath);
}

このソースだと、ChromeとFIreFoxでは問題なく表示されましたが、Safariでは表示されませんでした。

Safariでも表示されたソース

CSS

.mov-clip{
-webkit-clip-path:url(#svgPath);
  clip-path: url(#svgPath);
}

修正点は1点だけvideoタグに直接適用せずに、親のdivタグに適用しただけです。

分かってしまうと単純な話ですが、気が付きにくかったのはこのビデオを自動再生にしていたため、最初の段階では、iPhoneで動画の自動再生が効かない問題だと勘違いしていたことでした。ところがSafariで確認したところ、PCでもSafariでは表示されないことが確認され、問題がclip-pathの側にあったと気がついたわけです。

参考になった解決策はこちら。いつも私を助けてくれるstackoverflowです。
https://stackoverflow.com/questions/66278982/video-with-clip-path-is-not-showing-working-in-safari