ビデオタグのposterが上手く発動しません

Question

<video class="company-name-video"  poster="<?php echo get_template_directory_uri(); ?>//img/high-five.png" autoplay loop muted>
      <source src="<?php echo get_template_directory_uri(); ?>//img/high-five.mp4">
      <source src="<?php echo get_template_directory_uri(); ?>//img/high-five.mov">
    </video>

上記のコードで動画は再生されるようになったのですが、画面の幅を縮めていくと、幅が991pxになった時点から動画が再生されず、その部分が白紙になってしまいます。
調べた限りでは、スマホは余計な通信費がかからないように動画再生されなくり、posterで登録した画像が表示されるという理解をしました。
どの記事もposterタグの書き方はワードプレス用(phpを使うやもの)ではなかったのですが、上記のコードであっていますか？
上記のコードでposterが表示されずに困っています。
よろしくお願いします。

追記:ビデオタグのセクションは以下のような感じです。

<section class="company-name">
  <div class="company-name-wrap">
    <!-- 背景用の動画ファイル -->
    <video class="company-name-video"  poster="<?php echo get_template_directory_uri(); ?>//img/high-five.png" autoplay loop muted>
      <!-- <source src="<?php echo get_template_directory_uri(); ?>//img/high-five.mp4"> -->
      <!-- <source src="<?php echo get_template_directory_uri(); ?>//img/high-five.mov"> -->
    </video>
    <!-- 背景の上に表示させたいコンテンツ -->
    <div class="company-name-title">
      <p>
        <?php the_field('title'); ?>
      </p>
    </div>
  </div>
</section>

// 会社概要セクション
.company-name {
  height: 500px;
  &-wrap {
    max-width: 1140px;
    margin: 0 auto;
    overflow: hidden;
  }
}
.company-name::before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background-repeat:no-repeat;
  background-position:50% 100%;
  background: rgba(0, 0, 0, 0.6);
  background-size:cover;
  }

  // ビデオ
/* ----- 背景用の動画ファイル ----- */
.company-name-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-image:url(../img/high-five.png);
  background-size: cover;
  }
 /* ----- 背景の上に表示させたいコンテンツ ----- */
  .company-name-title{
  position: relative; /*必ず必要*/
  z-index: 2; /*必ず必要*/
  display: flex;
  width: 50%;
  justify-content: center;
  align-items: center;
  text-align:center;
  margin: auto;
  p {
    padding-top: 208px;
    font-size: 54px;
    // color: white;
    color: rgba(255,255,255,0.7);
    font-weight: bold;
  }
  }

Answer 1

コード自体はあってると思われます。

原因の切り分けのため

・991px以上で、poster画像は表示されるかどうか

を確認されてはいかがでしょうか？

また、WordPressでキャッシュプラグインなどを利用してる場合、キャッシュが影響する可能性もあります。

また、company-name-videoクラスに何か記載されてる可能性もありますね。

Comments

[takawork]

回答ありがとうございます。追記したコードのようにvideoのソースタグを消すと、991px以上でposterが画像が表示されて、991未満だとposter画像が消えてしまいあmした。ちなみにキャッシュプラグインなどは使用してません。991px未満で強制リロードをしても、動画が表示されないという状況です。

[takawork]

質問のトップに該当ページのURLを貼ってみました。お手隙の際に見ていただけると助かります。
またこちらでもいろいろ触って見たところ、クロームでサイズを縮めるとbackground-imageが白くなってしまうようです。(他のページでも消えてしまいました。)よろしくお願いします。

[hiok]

z-indexとpositionが原因かもしれません。

CSSに以下を追加してみてください。

@media screen and (max-width:990px) {
body{
background-color:transparent;
}
}

[takawork]

無事に背景が表示されました。ありがとうございました。