サイト練習:背景が動画:日本語版
背景が動画:完成版にリンク
上野動物園の歴史 | 上野動物園公式サイト - 東京ズーネット:文章をお借りしています
NHKクリエイティブ・ライブラリー:動画をお借りしています
Google Fonts:google fonts
★ビデオタグの使い方
★ビデオの上に文章が重なるので、ビデオにはz-indexを振り分けている
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>背景が動画</title> <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css"> <meta name="viewport" content="width=device-width"> <!--★いるよ!!--> <!--[if lt IE 9]> <script> document.createElement('video'); </script> <![endif]--> <style> html,body, div, h1, p, video { margin: 0; padding: 0; line-height: 1.0; } html,body { height: 100%; } video { position: fixed; left: -260px; top: -250px; /* NHKのときだけ*/ min-width: 145%; min-height: 145%; width: auto; heiht: auto; z-index: -100; background: url(img/.png) no-repeat; /*動画が表示されない場合の代替画像*/ background-size: cover; display: block; /*IE8以下の為*/ } #container { width: 100%; height: 100%; overflow: hidden; background: rgba(100, 150, 200, 0.3); } .overlay { background: rgba(0, 0, 0, 0.4); /* 画像をぼかしている*/ color: #FFF; margin: 60px; padding: 30px; width: 400px; border-radius: 20px; border: 2px solid #FFF; float: left; } h1 { font-family: 'Noto Sans Japanese', serif; font-size: 36px; color: #FFF; text-align: center; letter-spacing: 3px; margin-bottom: 20px; } p { font-family: 'Noto Sans Japanese', serif; line-height: 2; color: #FFF; } /* font-size */ html { font-size: 62.5%; } /* =10px */ body { font-size: 16px; font-size: 1.6rem; } /* =16px */ h1 { font-size: 32px; font-size: 3.2rem; } p { font-size: 16px; font-size: 1.6rem } </style> </head> <body> <video autoplay loop muted> <!--自動再生、ループ、最初は音なし--> <source src="img/panda.mp4" type="video/mp4"> </video> <div id="container"> <div class="overlay"> <h1>上野動物園の歴史</h1> <p>上野動物園は、1882(明治15)年に農商務省所管の博物館付属施設として開園した、日本で最初の動物園です。1886(明治19)年には宮内省所管になり、1924(大正13)年には皇太子殿下(昭和天皇)のご成婚を記念して、東京市に下賜されました。<br> 第2次大戦中には、猛獣処分と呼ばれる悲しい出来事がありましたが、これまで上野動物園は「生きた博物館」として世界各地から集まったさまざまな動物を展示してきました。<br> また、都立動物園でありながら、日本を代表する動物園としても機能しており、1972(昭和47)年には、日中国交回復を記念しジャイアントパンダが来園し、大変なにぎわいを見せました。</p> </div><!--.overlay--> </div><!--#container--> </body> </html>