videoタグを使って背景に動画を設定する方法【HTML/CSS】

動画を背景に設定する場合は、CSSで動画の上に要素を重ねる形になります。今回は、親要素の高さを固定し、video要素を position プロパティで絶対配置にして、 width・height プロパティを 100% + object-fit: cover; で親要素全体に表示されるようにしています。 object-fit プロパティについては、縦横比を保ったままCSSでトリミングも可能なobject-fit【CSS】をご覧ください。

動画の上に重ねる要素(今回は p タグ)を絶対配置にしない場合は、親要素の height プロパティを指定せず、 padding プロパティや内包する要素で高さを可変にする事も可能です。

また、動画の上に疑似要素( before、after )でオーバーレイなどを重ねる事で、多少動画が荒くてもカバー出来たり、動画が必要以上に目立たなくなりますので随時対応していただければと思います。

ページ全体の背景に動画を設定する方法

body < position: relative; >.movie_blk < width: 100%; height: 100%; position: fixed; z-index: -1; >.movie_blk video

動画のブロックを position: fixed; + z-index: -1; にする事で背面に表示しています。もしも動画がはみ出る場合は oveflow: hidden; を追加し、コンテンツ内容が背面になるようでしたら position: relative; + z-index: 1; を追加してみてください。

📎📎📎📎📎📎📎📎📎📎