webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

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

      2020/07/16

今回は、サイト閲覧者にインパクトを与えやすい・最近のトレンドになっている『ヘッダーやメインビジュアルみたいな部分に、背景の動画を流す』をやってみたいと思います。 使うのは、動画を埋め込める『html5 video要素』と、コメントも上に表示で きるようにcssもいじりました。どんな感じかさっそく見ていきましょう。

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

ブラウザ表示例

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

動画背景にするコード(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で』 というように指定しました。

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

そのほかのポイント/h2>

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

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

スマホ非表示方法

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

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

あとがき・まとめ

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

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


【カテゴリ】 - CSS
【タグ】 -

  関連記事

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【CSSエディット】『&nbsp;』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

今回は、当サイトでもよく取り上げているCSSを使ったアニメーショ ...

【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)

今回は、一般的には『クソ重い』とされる、スライダー・スライドショ ...

【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニュ ...