WEBデザインで自由に使えるCC0動画サイト「Coverr」、WordPressでの簡単な使い方など

Coverr動画を使ってみる

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の設定なら以下のように行います。

WordPressの最大アップロードファイルサイズを変更する方法

WordPressのメディアのアップロードから、画像やPDFをアップロードする時 ...

website-fun.com

ただ、エックスサーバーのような気の利いたサーバなら、php.iniをサーバーのコントロールパネルから変更できるようになっています。

php.ini設定項目がある。

設定変更を選んで

最大アップロードサイズを変更します。（以下は最大30MBに設定した例）

ロリポップサーバーでなら以下のように、

ロリポップ！ならWordPressのメディアのアップロードサイズの上限を簡単に変えられるよ | えむ氏のログ

WordPressを使い始めて半月ほど経ちました。僕のブログでは、自分の撮った写真を記事にあげたり、アイキャッチ画像を設定したりして、見栄えのよい記事を投稿しようと心がけています。でも最初は写真のあげ方とかよくわからなくててんやわんやしたし、面倒なこともあったので、忘れないようにメモしておきます。画像を記事に載せよ...

mlog.xyz

さくらサーバでなら以下のように、結構簡単に変更できます。

[WP]さくらサーバーで、WordPressのファイルアップロード上限を増やす方法

WordPress ブログを運用していると、画像や音声、動画のメディアファイルをアップするには、上限が2 MB…

www.webantena.net

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>

</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;
}

.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="http://nelog.jp/wp-content/uploads/2015/06/Hello-World.jpg">
        <source src="http://nelog.jp/wp-content/uploads/2015/06/Hello-World.webm" type="video/webm">
        <source src="http://nelog.jp/wp-content/uploads/2015/06/Hello-World.mp4" type="video/mp4">
    </video>
    <div class="hero-title">Hello world!</div>
</div>