以下のコードを記述して、動画をクリッピングしたいのですが、なぜかiPhoneのみクローム、サファリなど全ブラウザで動画が全く表示されません。
(Windows、macPC、Androidでは表示されます。)
<video loop="" autoplay="" muted="" playsinline="" src="https://サイトのURL/movie.mp4" class="clip"></video> <svg version="1.1" x="0px" y="0px" viewBox="0 0 420 567.7" height="0" width="100%" preserveAspectRatio="xMidYMid slice" class="sp"> <defs> <clipPath id="svgPath" clipPathUnits="objectBoundingBox"> <path transform="scale(0.0012345, 0.0012345)" d="M0,604.4C0~・・・4Z"></path> </clipPath> </defs> </svg>
<style> .mask { -webkit-clip-path: url(#svgPath); clip-path: url(#svgPath); } <style>
以下のコードで試したときは(レスポンシブは効かないですが)動画が表示はされたので、<path>タグ内の「M0,604.4C0~・・・4Z」という羅列はあっているようなのですが、その他でどこを修正すべきかご教示いただけますと幸いです。
.clip { -webkit-clip-path: path('M0,604.4C0~・・・4Z')!important; clip-path:path('M0,604.4C0~・・・4Z')!important; }
あなたの回答
tips
プレビュー