我正在一个网站上工作,并为它的移动版本而苦苦挣扎。我的问题是我希望视频在屏幕小于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开始。

最佳答案

问题在于图像容器位于视频容器内部,因此将其设置为无时,所有图像容器都不会被隐藏,因此请将两个容器分开放置。请使用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>

09-30 14:53
查看更多