背景が動くサイトの作り方HTMLとCSSのみの編集。
背景が動くサイトは前述のプラグインを読み込む方法のほかに、HTMLとCSSを編集するだけで作成することができます。 特別なスキルは要りませんが、HTMLとcssに対しての理解がないと難しい作業になるでしょう。

必要なものは主に.mp4という拡張子のついた動画ファイルを自分の所有するサーバーに置くことが必要です。

動画についての説明ですが、公序良俗に反していないものを利用することが前提となります。

WEBマスターやサイトの管理者は著作権を持っていますが、動画内に肖像権を侵害するような人物の映り込み、撮影許可が無いところでの無断撮影した動画などをアップロードすることは禁止されています。
このことが理解できる方はあまり難しくなく背景が動くサイトの運用が可能かと思われます。

また、HTMLとCSSを編集することが前提になりますので、自分のホームページを持っているが、HTMLが編集できないやcssを自由に編集することができない。編集する権限がないというサイトでは運用できません。

用意するもの

.mp4という拡張子のついた動画ファイル
自由にファイルを置くことができるサーバー（レンタルサーバーでも可能です）。
HTMLとCSSファイル

正確には一部の背景が動くサイトであり、画像の代わりに動画を挿入することによって宣伝効果を高める性質があります。 静止画よりも躍動感を感じてほしい、静止画で表現するよりも動いているものを見てほしいなどのサンプリング目的もあります。

実際の運用方法を明記します。 
1.HTML記述方法

<!DOCTYPE html>
<html>
<head>
この部分は古いブラウザに対応するための記述

この部分は古いブラウザに対応するための記述  
<style>
  video { display: block; }
</style>
</head>
<body>

<video autoplay loop muted poster="rrs.png" 
id="bgvid" width="100%" height="100%">

<source src="rrs.webm" type="video/webm">

<source src="https://kurotsushirouproject.top/
rrs1080p.mp4" type="video/mp4">
</video>

<div class="overlay">
  コンテンツ
</div>
</body>
</html>

videoタグの中に"autoplay"とありますが、

"muted"というプロパティを指定して音声再生を無効にしないと
自動再生ができません。
動画を繰り替えときは"loop"プロパティを記入します。

また、レンスポンシブ対応をする際には

videoタグの中に幅と高さの指定をすると
開いているブラウザの大きさによって可変します。

2.CSS記述方法
#bgvid {
  
  			 position: fixed; 
  			 right: 0; 
  			 bottom: 0;
  			 min-width: 100%; 
  			 min-height: 100%;
  			 width: auto; 
  			 height: auto; 
  			 z-index: -100;
  			 background: url(rrs.png) no-repeat;
  			 background-size: cover;
  			 opacity: 0.5;
  			 overflow: hidden;
}

#bgvidというIDに対してのCSSをあてている記述です。

以上で背景に動画を用いたWEBサイトができます。 前ページで紹介していた環境の違いなどでプラグインを用いることだできない場合や、テキストが多く縦長なWEBサイトになってしまう場合には上記の方法はあまりお勧めできません。
ピンポイントで動画を紹介するという感じにするか、トップサイトの上部に大きく表示するという方法がおすすめです。

以下にサンプルページのリンクを載せておきます。このような感じになるだなというイメージで見ていただけたら幸いです。


サンプルページ



前ページへ戻る    HOME