ヘッダー動画上のテキストレイヤーが反映されない

お世話になります。
ワードプレス内のHTML、CSSなどに関して質問です。

現在以下のサイトのヘッダーに動画を掲載しています。
https://locusfocus.jp/

動画上にテキストを載せたいのですが以下の記述ではiphone以外のPCブラウザ（chrome、IE、FireFox）では反映されませんでした。

■HTML（ワードプレス：テーマ「Cocoon」内head-insert.php）

<?php if(is_front_page() ): ?>
<div class="video-wrap">
	<video-txt>ローカルビジネスに最先端の技術を。<br>あなたを活かした集客支援サービス。</video-txt>
<video src="https://locusfocus.jp/wp-content/uploads/movie/locus-info.mp4" playsinline autoplay loop muted>
    <img src="https://locusfocus.jp/wp-content/uploads/2020/07/locus-image.png" alt="LocusTop">
  </video>
</div>
<?php endif; ?>

■CSS

/*トップ動画用↓*/
.video-wrap {
  position: relative;
}
video-txt {
  font-family: serif;          
  color: #fff;
  font-size: 115%;
  position: absolute;
  left: 10%;
  top: 50px;
  z-index: 1;
}
/*トップ動画用↑*/

またIEでは動画が左側にずれてしまうなどの不具合があります。
お手数ですがお分かりの方はご協力いただけると助かります。

情報など不足がありましたら追記いたしますのでご指摘いただければと思います。
それではよろしくお願いいたします。

行動規範の内容に同意します

回答1件

<video-txt>なるタグを調べてみましたが、見つかりませんでした。
そのテーマ特有のものなのだろうか？
とりあえず下記のコードで動画にテキストは載ってます。
IEでも動作確認済み。
ちなみに我が家のchromeでは上記urlで動画は左にずれていました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>test</title>
7    <style>
8        .video_Wrap {
9            width: 80%;
10            text-align: center;
11            margin: 0 auto;
12            position: relative;
13        }
14
15        p {
16            top: 0;
17            left: 0;
18            position: absolute;
19            width: 80%;
20            font-family: serif;
21            color: #fff;
22            font-size: 45px;
23            padding: 0;
24            margin: 0;
25            text-align: left;
26        }
27
28        video {
29            width: 100%;
30        }
31    </style>
32</head>
33
34<body>
35
36    <div class="video_Wrap">
37        <p>ローカルビジネスに最先端の技術を。<br>あなたを活かした集客支援サービス。</p>
38        <video src="https://locusfocus.jp/wp-content/uploads/movie/locus-info.mp4" playsinline="" autoplay="" loop=""
39            muted=""></video>
40    </div>
41</body>
42
43</html>

投稿2020/08/03 17:53

Jon_do

総合スコア1373

suume

2020/08/05 02:02 編集

Jon_do様ご回答ありがとうございます！ <video-txt>について、すみません。<ｐ>タグだと他のテキストにも適用されてしまうため、独自のタグを適当につけておりました… いただきましたコードをサイト内に適用させていただきました。まだキャッシュが効いているためか特に変化ないように見えます。何か記述方法の不備などありましたらお手数ですがご指摘いただければと思います。

行動規範の内容に同意します