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です。とりあえずは</body>手前に書けば良いかなと。通常のテーマであれば</body>はfooter.phpにあると思います。

<video autoplay loop poster="<?php echo get_stylesheet_directory_uri(); ?>/videos/chimney.jpg" id="bgvid">
  <source src="<?php echo get_stylesheet_directory_uri(); ?>/videos/chimney.webm" type="video/webm">
  <source src="<?php echo get_stylesheet_directory_uri(); ?>/videos/chimney.mp4" type="video/mp4">
</video>
<style type="text/css">
video#bgvid {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
  background-color: #000;
}

/*少し透過して背景を見えるようにする*/
#main,
#footer{
  opacity: 0.9;
}

/*文字色がかぶって見えづらいところは見やすいように修正*/
#sidebar{
  padding: 5px;
  background-color: #fff;
  opacity: 0.9;
}
</style>

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

ビデオ要素

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

<video autoplay loop poster="<?php echo get_stylesheet_directory_uri(); ?>/videos/chimney.jpg" id="bgvid">
  <source src="<?php echo get_stylesheet_directory_uri(); ?>/videos/chimney.webm" type="video/webm">
  <source src="<?php echo get_stylesheet_directory_uri(); ?>/videos/chimney.mp4" type="video/mp4">
</video>

スタイルのポイント

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

video#bgvid {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
  background-color: #000;
}

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

参考 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

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

  4. 名前:りゅうちん 投稿日:2017/05/13(土) 03:35:23 ID:d5932c1f2

    はじめまして。最近Wordpressを使い始めました初心者です。
    いろいろと参考にさせてもらっています。

    2点教えていただきたいのですが、
    【1】「そのフォルダごとWordpressテーマ(子テーマ)フォルダ内に放り込みます。」とありますが、
    子テーマとは、どういったものでしょうか?
    Wordpressフォルダ直下にvideosフォルダを配置すれば良いのでしょうか?

    【2】「以下のようなコードをタグ直下内に書けばOKです。」とありますが、
    「メニュー」→「外観」→「テーマの編集」で右側にあります、~.phpのどれになりますか?
    全て見たのですが、わかりませんでした。
    別のところでしょうか?

    よろしくお願いいたします。

  5. アバター画像 名前:わいひら 投稿日:2017/05/13(土) 08:08:29 ID:ae1f25094

    はじめまして。

    【1】子テーマについては、以下の記事を参照してください。
    WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方など
    カスタマイズをするなら、子テーマを使った方が後々便利になるというだけで、必ず使う必要ありません。
    テーマフォルダ(親テーマ)内にvideosフォルダを作成して動画を配置しても良いです。
    子テーマを利用する場合は、子テーマフォルダ内にvideosフォルダを作成して動画を配置します。

    【2】これはテーマによって変わってくるかもしれません。
    ただ、通常であれば/bodyタグ(bodyの閉じタグ)はfooter.phpの最後のほうにあると思います。

  6. 名前:りゅうちん 投稿日:2017/05/14(日) 17:34:31 ID:c9c67e4db

    回答ありがとうございました。
    何とか設定できました。
    もう1点お聞きしたいのですが、「少し透過して背景を見えるようにする」コードの
    記載がありますが、の前に上記のコード全て追記したのですが
    透過しているように見えないのですが、何か他に設定が必要なのでしょうか。

  7. 名前:りゅうちん 投稿日:2017/05/15(月) 16:40:27 ID:b451e7db8

    度々、すいません。
    動画の設定ですが、なんとか設定できました。
    私の場合、子テーマが「TwentyEleven」だったので、
    /wordpress/wp-content/themes/twentyeleven配下にvideosのフォルダを配置して
    設定することができました。
    あと、「少し透過して背景を見えるようにする」設定ですが
    各投稿で表示している画像は、薄くなっているのですが、背景は透けていない状態です。
    style.cssに記載してみたのですが、変化なしでした。
    寝ログさんが使用している子テーマでないと無理なのでしょうか。
    始めたばかりで素人質問となってしまってすみません。

  8. アバター画像 名前:わいひら 投稿日:2017/05/15(月) 19:48:11 ID:909aac5d1

    以下のCSSセレクタは、当サイトのものに合わせて指定してあります。

    /*少し透過して背景を見えるようにする*/
    #main,
    #footer{
      opacity: 0.9;
    }

    「TwentyEleven」テーマを利用しているのであれば、「TwentyEleven」のメインカラムとフッターに合わせたCSSセレクタを書く必要があります。
    ブラウザのデベロッパーツールなどでCSSセレクタを調べて書き換えてみてください。
    WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方