HTMLの背景にビデオを追加する方法

1. \

   • \

   <video autoplay loop muted>
    <source src="video.mp4" type="video/mp4">
   </video>

   • 上記の例では、video.mp4というファイル名のビデオを背景に表示しています。autoplay属性は自動再生を有効にし、loop属性はビデオをループ再生します。muted属性はビデオの音声をミュートします。

2. CSSの背景プロパティを使用する方法:

   • CSSのbackgroundプロパティを使用して、ビデオを背景に設定します。

   <div class="video-background">
    <div class="video-wrap">
      <video autoplay loop muted>
        <source src="video.mp4" type="video/mp4">
      </video>
    </div>
   </div>

   .video-background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
   }
   .video-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
   }
   .video-wrap video {
    min-width: 100%;
    min-height: 100%;
   }

   • 上記の例では、ビデオを背景に表示するためのHTMLとCSSのコードを示しています。video-backgroundクラスはビデオを囲むコンテナを定義し、video-wrapクラスはビデオを包む要素を定義します。ビデオはCSSで100％の幅と高さに設定されます。

これらの方法を使用して、HTMLの背景にビデオを追加することができます。必要に応じて、ビデオのパスやフォーマットを適切に指定してください。また、ビデオの再生制御やデザインのカスタマイズも可能です。