WEBデザイン利用に適した動画が多数公開されている「Coverr」というサイトが良かったので紹介です。
CC0(パブリックドメイン)ライセンスなので、動画制作者の許可なく自由に利用することができます。
目次
Coverrとは
Coverrは、美しいフリー動画配布サイトです。
毎週月曜日に7つの新しい動画がアップされます。
動画の利用は、CC0 1.0になっています。CC0とは、著作物に対し、「できる限りの権利を世界的に放棄する」という意思表示をするための法的ツール(表記)となっており、作品は完全にパブリックドメイン(知的財産権が発生していない状態又は消滅した状態)に置かれます。
簡単に言うと、営利目的で使おうとも、許可を得ることなく勝手に利用、複製、改変、配布、上演などをすることができる動画ばかりのサイトです。
利用コードも載っている
動画ファイルをダウンロードすると、WEB利用に必要な以下のファイルが梱包されています。
- MP4動画
- WEBM動画
- OGV動画
- JPG画像
またこのサイトの特徴として、動画を利用するためのコードもあらかじめ載っています。
WordPressでの最も簡単な利用方法
Coverrに載っているコードでも、多分うまくは行くのかもしれませんが、僕の環境で試してみたところ、何度やってもうまくいかなかったので、JavaScriptなどを使わない最も手軽なWordpressでの利用方法を紹介します。
主な手順
WordPressテーマなどで、簡単に利用する主な手順は以下です。
- WordPressのアップロード容量を緩和(制限されている場合)
- Coverrから動画をダウンロード
- WordPressのメディアにアップロード
- 動画を利用するためのタグを挿入
- CSSの編集(コピペ)
WordPressのアップロード容量を緩和
まずは、Wordpressの「最大アップロードサイズ」の確認を行います。
確認をするには、Wordpress管理画面から「メディア→新規作成」画面を表示させ、ページ下部に出てくる「最大アップロードサイズ」を確認してください。
デフォルトだと、2MBぐらいになっているかと思います。
これだと少し少ないので10MBくらいに変更したいと思います。
変更するには、php.iniの設定なら以下のように行います。
ただ、エックスサーバーのような気の利いたサーバなら、php.iniをサーバーのコントロールパネルから変更できるようになっています。
php.ini設定項目がある。
設定変更を選んで
最大アップロードサイズを変更します。(以下は最大30MBに設定した例)
ロリポップサーバーでなら以下のように、
さくらサーバでなら以下のように、結構簡単に変更できます。
Coverrから動画をダウンロード
次に、Coverrから動画ファイルなどをダウンロードします。
気に入った動画などがあればクリックしてください。
すると、動画のモーダルウィンドウが表示されるので、「Download」からファイルをダウンロードしてください。
WordPressのメディアにアップロード
ダウンロードしたファイルを解凍して中にある「.jpg」、「.mp4」、「.webm」ファイルを、Wordpress管理画面の「メディア→新規追加」からアップロードしてください。
動画を利用するためのタグを挿入
あとは、Wordpressテーマで動画を使用したい場所のテンプレートファイルなどに以下をコピペします。
<div class="hero-module"> <video autoplay loop poster="【jpgファイルのURL】"> <source src="【webmファイルのURL】" type="video/webm"> <source src="【mp4ファイルのURL】" type="video/mp4"> </video> <div class="hero-title">タイトルなど</div> </div>
あとは、先程アップロードしたメディアファイルからURLを取得して、【jpgファイルのURL】、【webmファイルのURL】、【mp4ファイルのURL】それぞれを入れ替えて入力します。
この時点で、ブラウザで読み込むと、動画自体は表示されます。
CSSの編集(コピペ)
最後に、動画上に表示するテキストなどのスタイルをstyle.cssなどに入力して調節します。
.hero-module{ position: relative; } .hero-title{ position: absolute; top: 0; bottom: 0; margin: auto; width: 100%; height:50px; line-height:50px; text-align:center; font-size: 50px; color: #fff; }
これは、入力する文字列によっても、スタイルは変わってくると思いますが、それぞれで調節してください。
動作確認
例として、以下のようにコードを入力して表示させると
<div class="hero-module"> <video autoplay loop poster="https://nelog.jp/wp-content/uploads/2015/06/Hello-World.jpg"> <source src="https://nelog.jp/wp-content/uploads/2015/06/Hello-World.webm" type="video/webm"> <source src="https://nelog.jp/wp-content/uploads/2015/06/Hello-World.mp4" type="video/mp4"> </video> <div class="hero-title">Hello world!</div> </div>
以下のように表示されます。
※一部Internet Explorer環境では動画が表示されず、画像が表示されているかもしれません。
まとめ
こんな感じで、「最大アップロードサイズ」さえうまくできれば、結構手軽にWordpressテーマ内に動画を含めたデザインを追加できます。
ヘッダー部分で表示させたり、グローバルナビ下に表示させて、スタイルをある程度調節すれば、ちょっと目を引く掴みになったりするかもしれません。
以下のように背景に表示させたりもできます。
利用方法はともあれ、サイトに動画を使う場合は、Coverrは、ライセンス面から、ファイルがそろっている面からでもおすすめです。