CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでフルスクリーンの動画背景を作成する方法【サンプルコード付き】

Webサイトにインパクトのある演出を加えたいとき、フルスクリーンの動画背景は非常に効果的です。CSSを活用すれば、画面いっぱいに広がる動画背景を簡単に実装できます。ここでは、実際に動作するサンプルコードを交えて具体的な手順を解説します。

実装のポイント

フルスクリーンの動画背景を実現するためには、以下のCSSテクニックが重要になります。

  • position: fixed：video要素を画面に対して固定配置し、right: 0 と bottom: 0 を指定して右下に配置します。
  • min-width / min-height：それぞれ 100% を指定することで、どの画面サイズやウィンドウ比率でも動画が常に全画面を覆うようにします。
  • autoplay・muted・loop属性：自動再生にはミュートが必須となるため、muted を必ず指定し、loop で繰り返し再生させます。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 17px;
    }
    .backgroundVideo {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
    }
    .content {
        position: fixed;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        color: #f1f1f1;
        width: 100%;
        padding: 20px;
    }
    .playPauseBtn {
        width: 200px;
        font-size: 18px;
        padding: 10px;
        border: none;
        background: rgb(72, 22, 167);
        color: #fff;
        cursor: pointer;
        opacity: 0.8;
    }
    .playPauseBtn:hover {
        opacity: 1;
    }
</style>
</head>
<body>
<video autoplay muted loop class="backgroundVideo">
<source
src="https://cdn.videvo.net/videvo_files/video/free/2019-
05/small_watermarked/190416_10_Drone1_04_preview.webm"
type="video/mp4"/>
</video>
<div class="content">
<h1>Heading</h1>
<h2>Some Sample text</h2>
<button class="playPauseBtn">Pause</button>
</div>
<script>
    document .querySelector(".playPauseBtn") .addEventListener("click", toggleVideo);
    var video = document.querySelector(".backgroundVideo");
    var btn = document.querySelector(".playPauseBtn");
    function toggleVideo() {
        if (video.paused) {
            video.play();
            btn.innerHTML = "Pause";
        }
        else {
            video.pause();
            btn.innerHTML = "Play";
        }
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザの画面全体にドローン撮影の動画が表示され、その下部には半透明の黒いオーバーレイが重なり、見出しテキストと「Pause」ボタンが配置されます。

CSSでフルスクリーンの動画背景を作成する方法【サンプルコード付き】

ボタンをクリックすると、JavaScriptの toggleVideo() 関数が呼び出され、動画の一時停止と再生が切り替わります。同時にボタンのラベルも「Pause」⇔「Play」と動的に更新されるため、ユーザーは現在の状態をひと目で把握できます。

まとめ

このように、position: fixed と min-width / min-height: 100% の組み合わせだけで、レスポンシブ対応のフルスクリーン動画背景を実現できます。さらにJavaScriptを組み合わせれば、再生・一時停止のコントロールも自由に追加できるので、ランディングページやポートフォリオサイトなど、視覚的な印象を強めたい場面でぜひ活用してみてください。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSで画面を50/50に分割する方法を徹底解説

    CSSを使えば、画面を左右に均等（50/50）に分割するレイアウトを簡単に実装できます。ポイントは、position: fixed と width: 50% を組み合わせることです。左側の要素には left: 0 を、右側の要素には right: 0 を指定することで、それぞれが画面の半分を占めるようになります。 実装手順のポイント 左右両方のコンテナに width: 50% を設定して、画面幅の半分ずつを確保します。 position: fixed と top: 0 を指定して、要素を画面全体に対して固定配置します。 z-index: 1 を設定することで、他の要素より前面に表示されます。