WordPressテーマの背景を動画にするカスタマイズ方法

WordPressテーマの背景に動画を利用する方法の紹介です。

編集する前は、「結構大変なんだろうな」と思っていたのですが、動画用のタグを記入して、そのタグに対するスタイルシートを書くだけの簡単な編集で利用できます。

以下のような動画背景が、ちょっとした編集で実装することができます。

背景が動画のWordpressテーマ

photo by Laineema

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

カスタマイズの主な手順

テーマの背景を動画にするには、以下の手順が必要です。

  1. mp4、webm動画を準備する
  2. HTML要素とスタイルの記入

やることは至って単純です。

動画を準備する

まず、動画は.mp4と.webmファイルを用意する必要があります。

webmは、GoogleがHTML5標準をねらう、オープンでロイヤリティフリーな動画コンテナフォーマットです。Chrome、Firefox、Operaで標準対応をしています。今後Googleは、YouTube動画をすべてWebMに変換することを発表していることからも、今後、一般的な動画フォーマットになるのではと思います。

ただ、動画を用意すると言っても大変です。たとえ動画があったとしても、ライセンスなどのことも考える必要があります。

ただ、こういったときに便利なのがMazwaiという動画素材サイトです。

Mazwai

Mazwai

Mazwai

ここの動画は、あらかじめmp4とwebmファイルがzipに含まれた形で配布されています。また、ライセンスも、商用利用OKです。

僕が利用したのは、klimetsさんのCHIMNYという作品ですが、CC BY 3.0ライセンスで利用可能になっています。

ライセンスは、動画ダウンロード時に表示されます。

動画のダウンロード

ダウンロードしたファイルは、「videos」フォルダの中にでも入れて、そのフォルダごとWordpressテーマ(子テーマ)フォルダ内に放り込みます。

あとは、「videos」フォルダ内に、動画が表示できなかった場合用の画像も準備しておいてください。(動画の1シーンをキャプチャしたものでOKです。)

コードを記述する

あとは、ビデオ背景用のコードを記述するだけです。

以下のようなコードを<body></body>タグ直下内に書けばOKです。

スタイル部分は、CSSファイルに書いてもOKです。

ビデオ要素

以下は、動画を「自動再生」、「ループ」で呼び出すvideo要素です。

スタイルのポイント

あとは、先程のvideo要素を「position: fixed;」にして固定表示にします。あとは、「z-index: -100;」に設定して、要素の最も背面に配置しています。

今回のコードは、以下を参考にさせていただきました。

参考 HTML5 Video

あと、サイトを作成するならこちらが参考になります。

参考 背景に動画を使ったWebサイトの作り方 | Webクリエイターボックス

まとめ

やってみる前は、「動画を利用した背景なんてかなり難しいのだろうなと思っていたのですが、実際にやってみると、結構単純な実装でできました。

動画を利用した背景は、「ページサイズが重くなる」、「デザインによっては文字が見づらくなるなど難点もありますが、インパクトだけはでかいです。

何か、人を「おっ!」と驚かせたいページで利用するにはいいかもしれません。

Video by klimets

『WordPressテーマの背景を動画にするカスタマイズ方法』へのコメント

  1. 名前:はる 投稿日:2015/04/07(火) 16:56:47 ID:a9b95ff19

    Simplicityでいつもお世話になっております。

    htmlにvideoタグを入力するのはわかったのですが、wordpressでの作業はテーマの編集で子テーマ(ヘッダー?)をつくって、そこにvideoタグを入力すれば良いのでしょうか?

    まだ勉強を始めたばかりで知識が足りなくて申し訳ありません。

    教えていただけたら幸いです。
    よろしくお願い申し上げます。

  2. わいひら 名前:わいひら 投稿日:2015/04/07(火) 20:03:05 ID:a02173cb5

    Simplicityを利用している場合は、子テーマはこちらです。

    Simplicityの子テーマ

    動画を準備して、コードをfooter-insert.phpあたりに貼り付ければOKかと思います。
    子テーマに関することは「Wordpress 子テーマ」などで検索してみてください。

  3. 名前:はる 投稿日:2015/04/07(火) 20:20:38 ID:a9b95ff19

    ご丁寧にありがとうございました!
    早速試してみます。