背景が動くサイトの作り方をお教えします。
背景が動くサイトはHTMLとCSSで作ることも可能ですが、難しい知識や技術が必要とされます。

このページではそのような難しい技術を使わずなおかつ豪華なWEBサイトを作る方法を紹介しています。

必要なものはYouTubeにアップロードされた動画とYTPlayerというプラグインを用意してください。

YouTubeにアップロードされている動画なら公序良俗に反しているもの以外はすべてオッケーです。 ただし、YouTubeは著作権に厳しいので規約違反が認められる動画は転載しないように気を付けましょう。本人のアカウント以外の動画を転載することは禁止です。

また、WEBサイトを持つことは、WEBマスターである制作者本人・管理者本人に著作権が帰属します。この点が理解できる方ならどなたでも背景が動くサイトを作ることが可能です。

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

用意するもの

・YouTubeにある動画のURL ・YTPlayer　APIまたはYTPlayerそのもの
GitHubというところにYTPlayerがある場合が多いです。

GitHub jqueryYTPlayer

・もしくは外部ライブラリから参照する方法があります。 jquery外部API

では、実際に運用方法を明記します。
1. HTMLをマークアップする
2. head内に記述する
3. ソース 
<html>
 <head>
  <meta charset="UTF-8">    

     <meta name="viewport=" content="width=1280px,
      initial-scale=1, 
      user-scalable=no">



	<title>サンプルページ</title>	
	
      <link rel="shortcut icon" href="https://～～～
      <link rel="stylesheet" 
      href="/jquery.mb.YTPlayer/dist/css/
      jquery.mb.YTPlayer.min.css"> 
      ←自前サーバーにおいてある場合 

    
    <script src="/jquery.mb.YTPlayer/dist/jquery.mb.YTPlayer.js">
    </script>
    <script type="text/javascript">
		$(function () {
  			$("#backgroundVideo").YTPlayer();
    });
    </script>
    
    </head>
    
      <body>
    <div id="backgroundVideo" data-property="{
  videoURL: 'https://www.youtube.com/watch?aaaaaaaaaaaa',
  mute: true,
  showControls: false,
	}">
	</div>←body内のdivタグにこの指定を入れないと背景が動画にならない
    ~~~
    ~~~
    ~~~
      </body>
</html>
CSS記述方法
/* ----- 背景用の動画ファイル ----- */
#backgroundVideo    {
            position: relative;
            right: 0;
            bottom: 0;
            overflow: hidden;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -10;
           
            }

以上の記述で背景が動画のWEBサイトを作成することができます。 環境の違いやAPIが用意できないなどの場合は別の方法を探す必要があります。
Kurotsu Shirou ProjectのトップのWEBサイトも上記と同様のコーディングで表現しています。
HOME    次ページへ