Question

我有两个PHP变量：

$video_mp4：这是一个视频文件。
$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包装图像内容，并在max-width: 576px中使用CSS Media queries显示图像并隐藏视频

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

媒体查询PHP变量

1 个答案: