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

この記事は約5分で読めます。

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

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

紹介されていた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>

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

ポイントは、

  z-index: 1;

でvideo(動画)のレイヤーを一番下にしておいて、その上に表示したいものを

position: relative;
z-index: 2;

で動画より上のレイヤーに表示する、という感じのようです。勉強になります。

ブラウザで表示するとこんな感じになります。

静止画ではよく分からないのでアップロードしてみました。

こちら→動画背景サンプル movie.html

やはり動画を使っているので、ローカルでテストしてるときは動きが速いですが、サーバに上げるとちょっと遅くなりますね。

まとめ:iPhone対応などがまだ…

iPhoneでこのサイトを見てみたのですが、

2015-04-15 09.33.06

こんな感じで、動画が背景として表示されませんでした。

色々調べて

poster="cycle.png"

と付けて背景の静止画を指定してみたのですがダメなようです。この辺はもうちょっと勉強が必要そうです(>_<)。

とはいえ、この著作権フリーな動画はHTMLとかだけでなく、Powerpointなどの背景とか、企業などの宣伝用動画にも使えそうでこういうサイトはありがたいですね(^^)/。忘れずにブックマークしておきたいサイトだと思います。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

インターネット 無料素材 HTML5
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。