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