Btukfyl

I have two PHP variables:

1. 
   $video_mp4: Which is a video file.


2. 
   $video_poster: Which is an image.

For desktop, I want $video_mp4 to load as an ambient video, which it does. But on max-width: 576px I want the $video_poster to show.

Unsure on how to approach this though. This is my current code and thought process:

<div class="hero__container--teaser">

  <div class="hero__teaser">

    <!-- By default, show video -->

    <?php echo wp_video_shortcode(  $video_mp4 );  ?>

    <!-- If max-width 576px, show image -->

    <?php echo "<img src='$video_poster'>;" ?>

  </div>

</div>

Wondering what the best practise here?

Wrap video content with .video and image content with .image and using CSS Media queries in max-width: 576px show image and hide video

.hero__teaser .image {

  display: none;

}

@media (max-width: 576px) {

  .hero__teaser .image {

    display: block !important;

  }

  .hero__teaser .video {

    display: none;

  }

}

<div class="hero__container--teaser">

  <div class="hero__teaser">

    <div class="video">

      <?php echo wp_video_shortcode(  $video_mp4 );  ?>

    </div>

    <div class="image">

      <?php echo "<img src='$video_poster'>;" ?>

    </div>

  </div>

</div>