WordPressテーマの背景に動画を利用する方法の紹介です。
編集する前は、「結構大変なんだろうな」と思っていたのですが、動画用のタグを記入して、そのタグに対するスタイルシートを書くだけの簡単な編集で利用できます。
以下のような動画背景が、ちょっとした編集で実装することができます。
photo by Laineema
目次
カスタマイズの主な手順
テーマの背景を動画にするには、以下の手順が必要です。
- mp4、webm動画を準備する
- HTML要素とスタイルの記入
やることは至って単純です。
動画を準備する
まず、動画は.mp4と.webmファイルを用意する必要があります。
webmは、GoogleがHTML5標準をねらう、オープンでロイヤリティフリーな動画コンテナフォーマットです。Chrome、Firefox、Operaで標準対応をしています。今後Googleは、YouTube動画をすべてWebMに変換することを発表していることからも、今後、一般的な動画フォーマットになるのではと思います。
ただ、動画を用意すると言っても大変です。たとえ動画があったとしても、ライセンスなどのことも考える必要があります。
ただ、こういったときに便利なのが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
Simplicityでいつもお世話になっております。
htmlにvideoタグを入力するのはわかったのですが、wordpressでの作業はテーマの編集で子テーマ(ヘッダー?)をつくって、そこにvideoタグを入力すれば良いのでしょうか?
まだ勉強を始めたばかりで知識が足りなくて申し訳ありません。
教えていただけたら幸いです。
よろしくお願い申し上げます。