wordpressでのスマホ対応webサイト制作・wpプラグイン・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法

   

こんにちは、管理人@SS_mshpです。

今回は、サイト閲覧者にインパクトを与えやすい・最近のトレンドになっている『ヘッダーやメインビジュアルみたいな部分に、背景の動画を流す』をやってみたいと思います。

使うのは、動画を埋め込める『html5 video要素』と、コメントも上に表示で
きるようにcssもいじりました。どんな感じかさっそく見ていきましょう。

■ヘッダーやメインビジュアルみたいな部分の背景に、動画を指定してみた例

■ブラウザ表示例


動画は動画素材.comさんからお借りしました(ワープの動画素材)。サーバーにアップして、リンクとかを指定し、管理人のお仕事サイトの枠に入れてみました。やってみた例サンプルなんで、宇宙ワープ風動画がit業種に合うかは微妙ですが、業種に合う場合は非常に効果的っぽいです。

(表示サンプルサイト)
https://sounds-stella.jp/test-bg-video
(注:よくある『スマホ用代わりの画像』は貼っていないので、pcで見ていただければと思います。

■動画背景にするコード(html)

<div class=”mv”>
<video autoplay loop>
<source src=”/warp.mp4″ type=”video/mp4″>
</video>
<div class=”mvc”>こめんと こめんと こめんと</div>
</div>

動画の埋め込みには『html5 video要素』をつかいました。サーバーにアップしておき、『source src=”/〇〇.mp4″』というように動画アドレスを指定します。『autoplay loop』というところで、読み込んだら自動的にスタート(音声は無しの動画なので、autoplayしてもうるさくありません)と、ループ再生できるようにします。

『mvc』という要素には、コメントを書けるようにしました。

■動画背景にするコード(CSS)

.mv {
height: 400px;
position: relative;
overflow: hidden;
}

.mv video {
opacity: 0.5;
margin: 0 auto;
z-index: -2;
width: 100%;
}
.mvc{
font-size:2em;
color:#fff;
position: absolute;
top: 10%;left:50%;
background-color: rgba(100,100,200,0.5);
z-index: 2;
}

動画を埋め込むだけならvideoタグでカンタンに入るんですが、上にコメント書けるようにするには、ちょっとコツが要りました。『普通にコメントしても重ならない&重ねても動画の色が邪魔で見れない』ということになります。

そこで
『z-indexで、コメントが入る要素を上に重なるように配置』
『そのままだと出てこないから、positionで位置指定(left:50%で、ちょうど真ん中から文章がはじまります)』
『opacityで透過して動画を薄くする(この下に背景がある場合は透けます)』
『文字は透過しない・背景は少し透過にするため、background-color: rgbaで』

というように指定しました。

■そのほかのポイント

■横幅をディスプレイいっぱいに広げるか、サイトのボックスの幅にあわせるか?

特に横幅が指定されていないところに『width: 100%;』と指定したので、横幅いっぱいに広がりました。
サイトのボックスに合わせる場合は、『このサイトの場合だと、max横幅が指定されているdiv id=”contents”に入れる』
とか、『動画が入っているボックスの横幅を、サイトのボックス横幅と合わせる』など行います。

■スマホ非表示方法

その場合は、メディアクエリのスマホなどの部分に、『@media screen and (max-width:767px) {.spnone{display:none;}}』など書いてもいいかもしれないけど、見えないだけでコード自体は存在しています。

『ユーザーエージェントで切る』『phpサイトの場合は条件分岐で非表示』などだと確実でしょう。

■あとがき・まとめ

コメントを動画の上にというのがちょっとコツがひつようでしたが、(今回はやりませんでしたが、スマホ時はかわりの画像を用意しておくとよいでしょう。)派手目の横幅いっぱい動画が実装できました。

良い感じの動画をチョイスして、他の持っているサイトにもつけてみようと思います。



【カテゴリ】 - webサイト制作 【タグ】 -

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

ワードプレス・ブログメディアで、ヘッダー画像を変える2通りの方法【phpモバイル非表示有】

今回は、ワードプレス・ブログメディアのサイトを作ったときに、ヘッダー(上についている画像)を変更する方法をお話します。 このサイトでも、時期に応じてヘッダーを変 …

データベース圧迫するワードプレス リビジョンを、安定稼動のため削除・制限する(プラグインとconfig.php)

今回は、ワードプレスの機能である『リビジョン』を制御したいと思います。 データベースなどが絡んでくるのでちょっとややこしいかもしれませんが、長く運用する上では押 …

スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)

今回は、管理人がワードプレスサイト作ってる時に、要素が変な位置に移動してしまうという症状が発生したので、それにCSSの修正で対処してみます。 元のテーマは『wp …

baserCMS(ベーサーシーエムエス)サイト制作2~テーマCSSやパーツPHP編集でデザイン

今回は、前回ちょっとインストールしたbaserCMS(ベーサーシーエムエス)webサイト制作の続きです。 システムやテーマの構成がどうなっているかにもちょっと突 …

ワードプレス派が覚えると便利なPHP~投稿記事・固定ページ指定して表示/非表示

今回はワードプレスサイト制作で使えるテクニックです。 PHPで使う条件分岐&ワードプレスタグを組み合わせて、投稿ページ/固定ページで表示/非表示を行っ …

ワードプレス記事一覧ページの『本文からの抜粋』を表示する関数と、その文字数の調整方法をチェックする

今回は、ワードプレスの文字を出力する関数についてです。 レイアウトをいじったら、ちょっと文字がスカスカするところが出てしまいました。これをPHP関数などをいじっ …

オウンドメディア&コーポレートサイトを、1サーバー1ドメインで構築する手順

今回は、ワードプレスなどを使って、汎用性のある複数サイト組み合わせを行います。 その組み合わせは『コーポレートサイト&オウンドメディア』。早速、サーバー設定や企 …

【ワードプレスサイトで更新情報表示】phpで取得と、プラグインで表示どちらが良い?

今回は、ワードプレス系のサイトで、トップページとか任意の部分に『ブログ部分の更新情報を表示』する方法について考えてみます。 方法は『phpで更新情報取得して表示 …

ワードプレスサイトに、コメント機能を実装しない/非表示に

今回は、ブログサイトによくある『コメント機能』を、実装しない方法を考えてみます。 コメント機能は、ブロガー交流によく使われてきましたが、使わない場合もあります。 …

音声セミナー・講座・音楽視聴をサイトに実装できる、HTML5 audio要素を使いこなそう

今回は、管理人もこのサイトやお仕事受付サイトで使用している、便利なHTMLタグを紹介します(オーディオ)。 ブラウザ対応やどんなサイトに使えるかなどを、さっそく …