動画の上にテキストを重ねたい。

Question

テーマ「シドニー」のヘッダーを動画にしております。
そこで、動画の上にテキストを重ねたいと思いcssのpositionプロパティで行おうと考えました。
動画の上に載せたいテキストにclass指定を行いました。

#wp-custom-header-video{
	position: relative;
}
.moji{
	position: absolute;
	 top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

という記述を行いましたが、動画の上にテキストが移動せず困っております。
cssでなくとも動画の上にテキストを載せられることが出来るなら、プラグインのようなものでも大丈夫です。
または、テーマのカスタマイズでも大丈夫なので、どなたか、動画の上にテキストを表示させる方法を教えてください。
よろしくお願いいたします。

以下が、ソースコードになります。

 <div id="wp-custom-header" class="wp-custom-header">
	<video id="wp-custom-header-video" autoplay="" loop="" width="1920" height="1080" src="該当ＵＲＬ/wp-content/uploads/2020/11/ヘッダーPV-1.mp4"></video>
	<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-play"><i class="sydney-svg-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"></path></svg></i></button></div>

<div id="content" class="page-wrap">
		<div class="container content-wrapper">
			<div class="row">	
	<div id="primary" class="content-area col-md-9">
		<main id="main" class="post-wrap" role="main">
<article id="post-368" class="post-368 page type-page status-publish hentry">
	<header class="entry-header">
		<h1 class="title-post entry-title">home</h1>	</header><!-- .entry-header -->
	<div class="entry-content">
		<p class="moji" style="text-align: center;">bbq</p>
			</div><!-- .entry-content -->

	<footer class="entry-footer">
			</footer><!-- .entry-footer -->
</article><!-- #post-## -->
		</main><!-- #main -->
	</div><!-- #primary -->

			</div>
		</div>
	</div>

Comments

[hatena19]

現状のHTMLを提示してもらえますか。
検証ツールで該当HTMLタグを右クリックして Copy - CopyElement でコピーできますのでそれを貼り付けてください。

[hatena19]

質問は編集できますので、質問の方に貼り付けてもらえますか。

Answer 1

動画のブロックdiv.sydney-hero-area内にテキストを配置して、

<div class="sydney-hero-area">
  <div class="header-image">
    <div class="overlay"></div>
  </div>
  <div id="wp-custom-header" class="wp-custom-header">
    <video id="wp-custom-header-video" autoplay="" loop="" width="1920" height="1080"
      src="該当ＵＲＬ/wp-content/uploads/2020/11/ホームページヘッダーPV.mp4">
    </video>
    <button type="button" id="wp-custom-header-video-button"
      class="wp-custom-header-video-button wp-custom-header-video-play">
      <i class="sydney-svg-icon">
        <!-- 略 -->
      </i>
    </button>
  </div>
  <h1 class="moji" style="text-align: center;">bbq</h1> <!-- ここにテキスト -->
</div>

下記のCSSで動画は画像の中央に配置されます。

.sydney-hero-area {
  position: relative;
}

.moji{
    position: absolute;
     top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

---

HTMLが現状のままでいくなら、下記でどうでしょう。

body {
  position: relative;
}

.moji{
  position: absolute;
  top: calc(50vw * 1080 / 1920);
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

Comments

[julie]

ありがとうございます。
ただ、sydneyでどうすれば、仰っている部分にhtmlを打ち込める方法のカスタマイズ方法がわからず困っております。
通常だと、index.phpあたりだと思うのですが、私は、フロントページを固定する形式でサイト構築を行いたいという希望があります。

どうすれば、mp4の下にHTMLの記述をできるようにするかも併せてご教授お願いします。

[hatena19]

現状のHTMLのままで行く場合のCSSコードを回答に追加しましたので参考にしてください。

[julie]

ご協力ありがとうございました。