画面を斜めに分割して2つの動画を表示する | かちびと.net
Result 画面を斜めに分割して動画を2つ同時に再生するサンプルです css body { background-color: black; overflow:hidden; } .parent { position: relative; height: 100vh; width: 100vw; } .video { position: absolute; top: -8px; left: -8px; width: 100%; height: 100vh; background-position: center; background-size: cover; overflow: hidden; } .clip-video { clip-path: polygon(99.9% 0, 0 99.9%, 0 0); } .clip-video-reverse { clip-path: pol
CSSだけで全画面の背景動画を実装する方法 | TechMemo
CSSだけで全画面の背景動画を実装する方法をご紹介いたします。ほぼコピペで実装できますので、サイトの背景に動画を表示したいとお考えの方は、ぜひ試してみてください。 なお、動画は別途ご用意いただく必要があります。 HTMLでは、videoタグで動画を設置します。記述する場所は、</body>の直前など、どこでも構いません。 <video autoplay loop poster="images/bg.png" id="video-background" muted> <source src="movie/bg.mp4" type="video/mp4"> </video> video要素に#video-backgroundを指定しておきます。 CSSでは、以下のように記述します。 #video-background { position: fixed; left: 0; top: 0; mi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
