Home>
<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>


The video started to play with the above code, but when the width of the screen is reduced, the video does not play from the time when the width reaches 991px, and that part becomes blank.
As far as I investigated, I understood that the smartphone does not play the video so as not to incur extra communication costs, and the image registered with the poster is displayed.
In each article, the poster tag was not written for WordPress (using php). Is it the above code?
I'm having trouble with the above code not showing poster.
Thank you.

PS: The video tag section looks like this:

<section>
  
  <!-Video file for background->
  <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>
  <!-Content to be displayed on the background->
    
    <p>
      <? php the_field ('title');?>
    </p>
    
  
</section>
// Company profile 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;
  }
  // video
/ * ----- Video file for background ----- * /
.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;
  }
/* ----- Content I want to display on the background ----- * /
  .company-name-title {
  position: relative;/* Required * /
  z-index: 2;/* Required * /
  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;
  }
  }