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

问题是您的图像容器位于视频容器中，因此当您将其设置为none时，所有图像容器都会被隐藏，因此请保持两个容器分开。取image out of your video container，因为当视口大小小于767像素时，您将隐藏整个容器。最初，设置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>

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

1 个答案: