Help us understand the problem. What is going on with this article?

【IE11対応】clip-pathを使用せずに動画をテキストやシェイプでマスクする方法

テキストでマスク

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データでマスクを取りたい場合は、以下のサイトで<path>タグをCanvasRenderingContext2Dに変換すると良いでしょう。

SVG to HTML5 Canvas Converter
http://www.professorcloud.com/svg-to-canvas/

作成した背景

clip-pathを使用すると簡単にマスクが実装できますが、IE11だと動きません。
動画をマスクする方法をぐぐってみても、clip-pathを利用した方法しか出てこなかったので作成しました。
使いみちとしては、基本はclip-pathを使用しつつ、UserAgentで判断してIE11のときに使用してください。


Twitterのフォロワーを募集しております!
すでにWeb業界にいらっしゃる方や、業界未経験の方、どんな方でも募集しておりますので、どうぞよろしくお願いいたします(*^^*)

Twitter - https://twitter.com/loki__tweet

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away