著作権フリーのかっこいい動画を使ってHTMLの背景に動画を入れる

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

Facebookの公開グループ「webクリエイターのための情報交換所」は有用な情報が流れるので、いつも参考にさせてもらっています。先日も著作権フリーの動画についての情報があり、興味があったのでダウンロードしてどんな風に使えるかを試してみました。
それについて書きます。

著作権フリーの映像がダウンロードできるサイト
HTMLの背景で動画を使ってみる
1. 背景にしたい動画をダウンロードする
2. ダウンロードした動画をHTMLの背景に使ってみる
まとめ:iPhone対応などがまだ…

著作権フリーの映像がダウンロードできるサイト

紹介されていたblog記事はこちらになります。

著作権フリーの映像がダウンロードできるサイト Pexels Videos

cc0ライセンスなので商用利用もOKでクレジットも不要です。
音声はカットされてるようなのでそのまま使えるのもありがたいですね。

と、あるように使い勝手が良さそうです。

画像のフリー素材はわりとたくさんありますが、動画のフリー素材は今回初めて見ました！いくつか見てみるとかっこいい動画が多く、使ってみたいと思わせるモノがたくさんあります。

HTMLの背景で動画を使ってみる

最近baserCMSに関する情報を集めていて、その開発元である株式会社キャッチアップ　さんのサイトを見ていて「おぉぅ！背景が動画だ…」と思っていたところなので、ちょっと背景に動画を使ったらどんな風になるんだろう…と興味が湧いていたところでした。

HTMLでどうやったらそれができるのか？ということもググって調べました。ということで早速チャレンジしてみます。

背景にしたい動画をダウンロードする

まず、動画配信サイトに行ってどの動画がいいか見てみます。

Pexels Videos

自転車が好きなので、↓この動画を使うことにしました。

Download For Freeボタンをクリック　すると…全画面で動画が表示されてしまいます(>_<)。

ということで、右クリックして　名前を付けてリンク先を保存　をクリック、PCの任意の場所に　343014810.mp4　という名前のファイルを保存します。

ダウンロードした動画をHTMLの背景に使ってみる

動画を背景にする、という方法についてググって

背景に動画を使ったWebサイトの作り方

こちらを発見しました(^^)/。なるほど、HTML5の技術でできそうなんですね。

動画をダウンロードしたフォルダに　movie.html　というファイルを作って、

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
  background: #000;
}
video {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1;
}
p {
    font-family: serif;
    color: #fff;
    font-size: 400%;
    margin:20px;
    text-align:center;
    position: relative;
    z-index: 2;
}
.divText {
    text-align:center;
    position: relative;
    z-index: 2;
}
.centerText {
    text-align:center;
    width:80%;
    font-family: serif;
    padding:20px;
    font-size:2rem;
    margin:auto;
    background-color:#fff;
    position: relative;
    z-index: 2;
}
</style>
</head>
<body>
<p>Cycle Links</p>
<video src="343014810.mp4" poster="cycle.png" autoplay loop>
</video>
    <div class="centerText">
        We love cycling.
        <div style="margin:20px;">
        <a href="http://over40.jitelog.jp/" target="_blank"><img src="40.png" style="width:90%"></a>
        </div>
    </div>
</body>
</html>

こんな感じのコードを書いてみました。

ポイントは、