HTML/CSS で動画の背景を追加する

12403 ワード
css html tutorial テキストリンク
クリエイターの皆さん、

ウェブサイトに動画の背景を追加する方法に関する簡単なチュートリアルです.レスポンシブにするためのすべてのヒントとコツを学びます.

ビデオ バージョンをご覧になりたい場合は、こちら :



1. コードの基本構造。



レストランから素敵なウェブサイトの作成を依頼されたとしましょう.ここでは、head のみを含む HTML ファイルを作成します.好きなフォントを追加するか、私が見つけたものを使用できます.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Video Background</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Roboto&display=swap"
      rel="stylesheet"
    />
  </head>
</html>


値をリセットしてフォントを追加するだけの CSS ファイルを作成します.

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Playfair Display, sans-serif;
  background: #f1f1f1;
}


2. ビデオを HTML に追加します。



ここで、ボディを作成する必要があります.その中にはビデオ タグがあり、タグとして追加できるソースを要求しますが、自動再生などの属性をいくつか追加する必要があります (ビデオが自動的に再生されます).ミュート(ビデオがある場合はビデオのサウンドをミュートする)およびループ(ビデオを無限に繰り返します):

<body>
      <div class="home">
        <video autoplay muted loop>
          <source src="ressources/cooking.mp4" type="video/mp4" />
        </video>
      </div>
  </body>


ビデオをリソースフォルダーに追加する必要があります.これは私が行ったことです.

ご覧のとおり、機能します.ただし、画面の横と下にスクロールバーがあり、映像が薄すぎるので、その上に文字を入れると文字が読みにくくなります.全部変えよう!

3. テキストを含むオーバーレイを追加します。



ビデオの下にオーバーレイを追加して、レストランを紹介するテキストを追加しましょう.

<div class="overlay"></div>
<div class="home-content">
     <h1>High-End Kitchen.</h1>
     <div class="middle-line"></div>
     <button>DISCOVER</button>
</div>


4. ページのスタイルを設定しましょう!



CSS ファイルに移動し、高さ 100vh (画面全体を占有するため) のコンテナーを作成することから始めます.これは、いくつかの要素 (このコンテナーの子) が絶対的であるためです.

.home {
  height: 100vh;
  position: relative;
}


それでは、ビデオを扱いましょう.

video {
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}


ビューポートの幅と高さ全体を使用するようになりました.つまり、ページの横と下にスクロール バーがなくなりました.

次に、オーバーレイを使用してビデオを暗くしましょう.

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  background: rgba(0,0,0,0.6);
}


ご覧のとおり、次のいずれかを使用できます.

width: 100%;
height: 100%;


また

 top: 0;
 left: 0;
 bottom: 0;
 right: 0;


要素を画面のすべての隅に固定するため、まったく同じことを行います!これはあなたが知っておくべきちょっとしたトリックです.

次に、タイトルとボタンのサイズを大きくしてコンテンツのスタイルを設定し、画面の中央に配置して、タイトルとボタンの間に縦の分割線を作成します.

.home-content {
  width: 600px;
  margin: 0 auto;
  position: relative;
  top: 150px;
  color: #fff;
  z-index: 3;
}

.home-content h1 {
  font-family: Playfair Display, serif;
  text-align: center;
  text-transform: uppercase;
  font-size: 85px;
  line-height: 1.1;
}

.middle-line {
  height: 200px;
  width: 2px;
  background: #fff;
  margin: 40px auto;
}

.home-content button {
  display: block;
  font-size: 20px;
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  margin: 50px auto 0;
  padding: 16px 30px;
  cursor: pointer;
}


高解像度の美しいビデオ背景を備えた、Web サイトの美しいランディング ページが完成しました.

ソース コード here を確認してください.

私のYoutubeチャンネルを見てみましょう:

ハッピーコーディング!

エンツォ.
白駿2156号ワインを味わう
rtmp サーバーとして ffmpeg を実行する