php - PHP 变量的媒体查询

Question

我有两个 PHP 变量:

1. $video_mp4: 这是一个视频文件。
2. $video_poster:这是一张图片。

对于桌面，我希望 $video_mp4 作为环境视频加载，它确实如此。但是在 max-width: 576px 上，我希望显示 $video_poster。

虽然不确定如何处理这个问题。这是我当前的代码和思考过程:

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

想知道这里的最佳做法是什么？

Answer 1

使用 .video 包装视频内容，使用 .image 包装图像内容并使用 CSS Media queries在 max-width: 576px 中显示图像并隐藏视频

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