HTML、CSS、jQuery を使用してレスポンシブなビデオ背景を作成する方法-jsチュートリアル-php.cn

HTML、CSS、jQuery を使用してレスポンシブなビデオ背景を作成する方法

王林

リリース： 2023-10-24 11:14:06

オリジナル

1129 人が閲覧しました

HTML、CSS、jQuery を使用してレスポンシブなビデオ背景を作成する方法

最新の Web デザインでは、ビデオ背景は非常に人気のある要素になっています。 HTML、CSS、jQuery を使用すると、応答性の高いビデオ背景を簡単に実装して、Web ページに動的で魅力的な視覚効果を追加できます。この記事では、レスポンシブなビデオ背景を備えた Web ページを作成する方法を詳しく説明し、対応するコード例を示します。

準備
まず、背景に適した動画ファイルを準備する必要があります。すぐに読み込まれるように、ビデオのファイルサイズが小さいことを確認してください。ビデオ形式は MP4、WebM、または Ogg です。
HTML 構造
単純な HTML 構造を使用して、ビデオ要素とページコンテンツを配置します。基本的な HTML 構造の例を次に示します。

<!DOCTYPE html>
<html>
<head>
   <title>响应式视频背景</title>
   <style>
      /* 在这里添加CSS样式 */
   </style>
</head>
<body>
   <video id="bg-video" autoplay loop muted>
      <source src="video.mp4" type="video/mp4">
   </video>
   <div class="content">
      <!-- 页面内容 -->
   </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

上の例では、ビデオファイルを <video> タグに配置し、 autoplay## を追加しました。 #、loop、および muted 属性を使用して、ビデオの自動再生、ループ再生、およびミュート効果を実現します。ビデオファイルは実際の状況に応じて変更する必要があります。

次に、いくつかの CSS スタイルを追加して、ビデオ要素とページコンテンツを定義する必要があります。基本的な CSS スタイルの例を次に示します。

* {
   margin: 0;
   padding: 0;
}

body {
   overflow: hidden;
}

#bg-video {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.content {
   position: relative;
   z-index: 1;
   text-align: center;
   padding: 50px;
   color: #fff;
}

ログイン後にコピー

上記の例では、ページのコンテンツ (

にあります) を設定します。相対的に配置し、その z-index を 1 に設定して、コンテンツがビデオの背景の前に表示されるようにします。また、body 要素を overflow: hidden; に設定して、ブラウザウィンドウの表示部分でのみビデオが再生されるようにします。

最後に、jQuery を使用してビデオの背景のサイズを変更し、応答よく表示されるようにします。簡単な jQuery スクリプトの例を次に示します。

$(document).ready(function() {
   $(window).resize(function() {
      var videoHeight = $(window).height();
      var videoWidth = $(window).width();
      $("#bg-video").css("height", videoHeight);
      $("#bg-video").css("width", videoWidth);
   }).resize();
});

ログイン後にコピー

$(window).resize() 関数を使用してウィンドウサイズの変更を検出します。ウィンドウサイズが変更されるたびに、#bg-video 要素の高さと幅を調整して、ウィンドウサイズとの一貫性を保ちます。

以上がHTML、CSS、jQuery を使用してレスポンシブなビデオ背景を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。