Question

我无法在移动设备中隐藏视频，我浏览了许多帖子并尝试了很多次，但仍然无法使用@media隐藏视频，而是显示图像。下面是我的html文件和css：

HTML

   <div class="container">
    <div class="logo">
      <h1>Name</h1>
      <hr>
      <h2>address</h2>
        <h3>City</h3>
        <h3>email</h3>
        <p>Personal Experience</p>
        <div class="vdo">
          <video src="####" autoplay muted loop>
        </div>
    </div>
  </div>

CSS

@media only screen and (max-width: 767px) {
.container {
  background: url('hero.jpg') center center cover no-repeat;
}

.vdo {
  display: none;
}
}

有人可以帮帮我，谢谢

Answer 1

试试这个：

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

Answer 2

你可以使用。

.vdo {
   display: none !important;
   visibility : hidden !important;
}

但仅display: none !important;在我的电脑中成功运作

注意：可能是您的代码存在问题。仔细检查是否有任何未关闭的标签。清除浏览器缓存。

Answer 3

你可以试试这个

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

无法通过媒体查询隐藏移动设备中的html5视频

3 个答案: