どうにもこうにもclip pathが使いづらい。
センターにどうやって置くの？かさえよくわからない。

知識が無いならば力技発動。

要は見た目がマスクならいいじゃない。
そこで考えたのが動画（画像）の上にカバーするように見えたい部分を抜きにした画像を重ねちゃう。

少しだけ頑張った？のが画像じゃなくてSVGでマスク。拡大されても大丈夫なように。

イメージはこんなかんじ。

で、後はVIDEOタグ等で動画を設置して、その後にdiv class=”mask”的な空要素を置く。

<video class="mask" autoplay loop >
<source src="mask.mp4">
</video>
<div id="mask"></div>

CSSは特に装飾とかをしないのであれば

#parent{
position:relative;
overflow:hidden;
}
video{
width:100%;
height:auto;
position:relative;
}
#mask{
position:absolute;
width:100%;
left:0;
top: 0;
height:100%;
background:url(mask.svg) no-repeat center center;
background-size:cover;
}

SVGを作るときに余白を考えながら書き出さないと上記サンプルの背景黒部分が表示されないので注意。

汎用性ゼロな対応・・・