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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

Coverr動画を使ってみる

WEBデザイン利用に適した動画が多数公開されている「Coverr」というサイトが良かったので紹介です。

CC0(パブリックドメイン)ライセンスなので、動画制作者の許可なく自由に利用することができます。

スポンサーリンク
レクタングル(大)広告

Coverrとは

Coverr

Coverrは、美しいフリー動画配布サイトです。

毎週月曜日に7つの新しい動画がアップされます。

動画の利用は、CC0 1.0になっています。CC0とは、著作物に対し、「できる限りの権利を世界的に放棄する」という意思表示をするための法的ツール(表記)となっており、作品は完全にパブリックドメイン(知的財産権が発生していない状態又は消滅した状態)に置かれます。

簡単に言うと、営利目的で使おうとも、許可を得ることなく勝手に利用、複製、改変、配布、上演などをすることができる動画ばかりのサイトです。

利用コードも載っている

動画ファイルをダウンロードすると、WEB利用に必要な以下のファイルが梱包されています。

  • MP4動画
  • WEBM動画
  • OGV動画
  • JPG画像

またこのサイトの特徴として、動画を利用するためのコードもあらかじめ載っています。

Coverr動画の使い方

WordPressでの最も簡単な利用方法

Coverrに載っているコードでも、多分うまくは行くのかもしれませんが、僕の環境で試してみたところ、何度やってもうまくいかなかったので、JavaScriptなどを使わない最も手軽なWordpressでの利用方法を紹介します。

主な手順

WordPressテーマなどで、簡単に利用する主な手順は以下です。

  1. WordPressのアップロード容量を緩和(制限されている場合)
  2. Coverrから動画をダウンロード
  3. WordPressのメディアにアップロード
  4. 動画を利用するためのタグを挿入
  5. CSSの編集(コピペ)

WordPressのアップロード容量を緩和

まずは、Wordpressの「最大アップロードサイズ」の確認を行います。

確認をするには、Wordpress管理画面から「メディア→新規作成」画面を表示させ、ページ下部に出てくる「最大アップロードサイズ」を確認してください。

メディアの最大アップロードサイズ

デフォルトだと、2MBぐらいになっているかと思います。

これだと少し少ないので10MBくらいに変更したいと思います。

変更するには、php.iniの設定なら以下のように行います。

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

php.ini設定項目がある。

エックスサーバーのホームページ設定

設定変更を選んで

エックスサーバーのphp.ini設定変更

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

エックスサーバーで最大アップロードサイズの変更

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

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

Coverrから動画をダウンロード

次に、Coverrから動画ファイルなどをダウンロードします。

気に入った動画などがあればクリックしてください。

Coverr - Beautiful, free videos for your homepage

すると、動画のモーダルウィンドウが表示されるので、「Download」からファイルをダウンロードしてください。

動画のモーダル画面が表示される

WordPressのメディアにアップロード

ダウンロードしたファイルを解凍して中にある「.jpg」、「.mp4」、「.webm」ファイルを、Wordpress管理画面の「メディア→新規追加」からアップロードしてください。

WordpressにアップロードしたCoverr動画ファイルの状態

動画を利用するためのタグを挿入

あとは、Wordpressテーマで動画を使用したい場所のテンプレートファイルなどに以下をコピペします。

あとは、先程アップロードしたメディアファイルからURLを取得して、【jpgファイルのURL】、【webmファイルのURL】、【mp4ファイルのURL】それぞれを入れ替えて入力します。

メディアからCoverr動画のURLを取得

この時点で、ブラウザで読み込むと、動画自体は表示されます。

CSSの編集(コピペ)

最後に、動画上に表示するテキストなどのスタイルをstyle.cssなどに入力して調節します。

これは、入力する文字列によっても、スタイルは変わってくると思いますが、それぞれで調節してください。

動作確認

例として、以下のようにコードを入力して表示させると

以下のように表示されます。

Hello world!

※一部Internet Explorer環境では動画が表示されず、画像が表示されているかもしれません。

まとめ

こんな感じで、「最大アップロードサイズ」さえうまくできれば、結構手軽にWordpressテーマ内に動画を含めたデザインを追加できます。

ヘッダー部分で表示させたり、グローバルナビ下に表示させて、スタイルをある程度調節すれば、ちょっと目を引く掴みになったりするかもしれません。

以下のように背景に表示させたりもできます。

Wordpressテーマの背景を動画にするカスタマイズ方法
Wordpressテーマの背景に動画を利用する方法の紹介です。 編集する前は、「結構大変なんだろうな」と思っていたのですが、動画用のタ...

利用方法はともあれ、サイトに動画を使う場合は、Coverrは、ライセンス面から、ファイルがそろっている面からでもおすすめです。