（隐藏视频）CSS 显示：none 不适用于 iPhone 的@media 查询

Question

我正在尝试使用@media 查询来隐藏一个自动循环播放的视频作为登陆页面。我想用一个短的、全宽度的、响应式的 .gif 背景替换隐藏的视频。

这是正在使用的 CSS 的副本：http://pastie.org/private/dhi4c4dxvysne0r9fkg8g#1

我正在尝试使用

@media (max-width: 767px) {
.fullscreen-bg {
background: url('landing.gif') center center / cover no-repeat;
}

.fullscreen-bg__video {
display:none!important;

}

我已成功用循环 gif 替换视频，但大播放按钮仍然出现在 ios 设备上，即使视频本身不可见。

有人知道解决方法或修复方法吗？

编辑：大播放按钮由 Safari 呈现，显然您无法隐藏它。这意味着隐藏视频不会降低响应速度。

那么我该如何通过媒体查询来请求完全不加载视频？

Answer 1

.video-container {
  background: transparent;
}
.video-container .video {
  display: block;
}
@media (max-width: 767px) {
  .video-container {
    background: url('landing.gif') center center / cover no-repeat;
  }
  .video-container .video {
    display: none;
  }
}

（隐藏视频）CSS 显示：none 不适用于 iPhone 的@media 查询

(Hide Video)CSS display: none not working with @media query for iPhone

css

ios

responsive