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

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

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

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

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

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

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

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

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

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

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

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

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

Pexels Videos

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

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

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

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

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

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

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

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

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

ポイントは、

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

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

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

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

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

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

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

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

2015-04-15 09.33.06

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

色々調べて

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

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

兎本美佳

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

トップへ戻る