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

Question

im在网站上工作，并为其与移动版本进行努力。我的问题是，当屏幕少于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可能会有所帮助，但我从未学过，所以我不知道从哪里开始。

Answer 1

问题是您的图像容器在视频容器内部，因此，当您将其设置为所有人时，所有这些都会隐藏起来，因此将两个容器分开。以image out of your video container为例，因为当视口尺寸小于767 PX时，您会隐藏整个容器。最初，设置display of the full-bg-img to none并在调整视口大小时，使用媒体查询显示为块，如图所示。

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