ホームページで動画の上にテキストを表示させたい。

質問

ホームページデザイン勉強中の者です。

こんな感じの、動画とテキストを重ねて、PCでもスマホでもバランスよく見えるトップページを作成したいです！
https://sp.elle.co.jp/beauty/chanel/2103/

質問１：wordpress等のCMSでは作成不可能でしょうか？
質問２：不可能な場合、HTMLとCSSを勉強して作成することになると思うのですが、ヒントを教えていただければ幸いです。

回答No.1

4017B · ベストアンサー

A1: 作成可能。
A2: HTML5とCSS3のみで作れます。

具体的な手法は幾つかあるので、実際にwebページを構築する質問者のIT技術と知識のレベルによって取捨選択する事になるかと思いますが…。一例としては以下の様なモノがあります。

- CSSだけで全画面の動画背景を表示する方法 https://beginners-high.com/background-movie/

CSSでwebページ上の要素の重なり具合や表示範囲などを細かく設定出来るので、それを利用して擬似的に <video> で動画を読み込んで、それをwebページ全画面表示にし、さらにそれの表示重なり順番を一番下にして、その上に他の文字や画像などを重ねて表示させるテクニックですね。

現状、webページの背景画像などを指定するための background:～; には画像や色しか指定出来ず、それ以外の動画を背景として指定する機能が無いので。動画を背景にするためにはこの様なイカサマというか、代替して擬似的に背景にするしか方法がないですね。

P.S.
WordPressで実際に作る場合、管理画面の記事投稿編集画面で「HTMLエディタ」に変更して置かないと、記述したHTMLタグやCSSなどがそのまま普通の文字列としてしか表示されませんので注意。

お礼

ありがとうございます。
投稿の後に自分で調べてみて自己解決（HTML+CSSテキストエディタで編集）で、できました。
PCでもスマホでもいい感じに表示されるようにできました。
リンク先も読ませていただき、勉強させていただきます。