javascript - 当屏幕太小时用图像替换视频

Question

我在一个网站上工作，并为它的移动版本而苦苦挣扎。我的问题是，当屏幕小于 600px 时，我希望视频消失，而不是视频，它应该显示具有相同宽度和高度的图片。这是我的视频代码。

    <div id="video" class="view hm-white-light jarallax"  data-jarallax='{"speed": 0.1}' data-jarallax-video="https://www.youtube.com/embed/watch?v=1Cpj3GdEG1s?start=[60]&end=[180]">
   <div class="full-bg-img">
      <div class="container flex-center">
         <div class="row">
            <div class="col-md-12 wow fadeIn">
               <div class="text-center">
                  <h1 class="Zedextitel" data-wow-delay="0.3s" align="center" style="font-size:100pt; color:white;">TEST</h1>
                  <h5 class="Videotitel" data-wow-delay="0.4s" style="font-size:30pt; color:white;">TEST</h5>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

我尝试了许多使用 CSS 的解决方案，例如:

    @media (max-width: 767px)
   {
    #video
      {
        display:none !important;
      }
}

但此解决方案的问题在于视频完全消失，没有任何背景。即使我添加:

background: url(/pictures/test.jpg)no-repeat center top;

视频所在的地方什么也没有出现。这真的让我很困扰，我不知道我可以尝试什么。也许你们中的一些人可以帮助我？我想也许使用 javascript 的东西会有所帮助，但我从未学过它，所以我不知道从哪里开始使用 JS。

Answer 1

问题是您的图像容器在您的视频容器内，所以当您将它设置为无时，所有它都会被隐藏，因此请将两个容器分开。将图像从您的视频容器中取出，因为当视口(viewport)大小小于 767 像素时您将隐藏整个容器。最初，将 full-bg-img 的 display 设置为 none，当调整视口(viewport)大小时，使用媒体查询将其显示为 block ，如图所示。

.full-bg-img {
  display: none;
  background: url(/pictures/test.jpg)no-repeat center top;
}

@media (max-width: 767px) {
  #video {
    display: none !important;
  }
  .full-bg-img {
    display: block;
  }
}

<div id="video" class="view hm-white-light jarallax" data-jarallax='{"speed": 0.1}' data-jarallax-video="https://www.youtube.com/embed/watch?v=1Cpj3GdEG1s?start=[60]&end=[180]">
</div>
<div class="full-bg-img">
  <div class="container flex-center">
    <div class="row">
      <div class="col-md-12 wow fadeIn">
        <div class="text-center">
          <h1 class="Zedextitel" data-wow-delay="0.3s" align="center" style="font-size:100pt; color:white;">TEST</h1>
          <h5 class="Videotitel" data-wow-delay="0.4s" style="font-size:30pt; color:white;">TEST</h5>
        </div>
      </div>
    </div>
  </div>
</div>

这是一个向您展示如何操作的示例:

#full-bg {
  display: none;
}
#video video{
    width:100%;
}
@media (max-width: 767px) {
  #video {
    display: none;
  }
  #full-bg {
    display: block;
  }
}

<div id="video">
  <video width="400" controls>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
</div>

<div id="full-bg">
  <img src="https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg">
</div>