テキストでマスク
See the Pen Cool UI - Mask the Video with TEXT by Loki (@loki__codepen) on CodePen.
パスの描画（シェイプ）でマスク
See the Pen Cool UI - Mask the Video with Path by Loki (@loki__codepen) on CodePen.
SVGデータそのままでは実装できません。一度canvasタグ内のJSで描画できる記述方法に変換してあげる必要があります。
手持ちのSVGデータでマスクを取りたい場合は、以下のサイトで<path>タグをCanvasRenderingContext2Dに変換すると良いでしょう。
SVG to HTML5 Canvas Converter
http://www.professorcloud.com/svg-to-canvas/
作成した背景
clip-pathを使用すると簡単にマスクが実装できますが、IE11だと動きません。
動画をマスクする方法をぐぐってみても、IE11非対応のclip-pathを利用した方法しか出てこなかったので作成しました。
使いみちとしては、基本はclip-pathを使用しつつ、UserAgentで判断してIE11のときに使用してください。
Twitterのフォロワーを募集しております！
すでにWeb業界にいらっしゃる方や、業界未経験の方、どんな方でも募集しておりますので、どうぞよろしくお願いいたします(*^^*)
Twitter - https://twitter.com/hiroki_web