背景视频在手机上消失

Question

我在处理背景视频时遇到了一些问题，当页面达到特定分辨率时，它就会消失。我想用特定分辨率的图像替换视频，但这会很奇怪（过渡）。

顺便说一句，我正在使用 Bulma 框架。

<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link rel="stylesheet" 
        href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
        <!-- <link rel="stylesheet" href="styles/debug.css"> -->
        <link rel="stylesheet" href="styles/helpers.css">
        <link rel="stylesheet" href="styles/grid.css">
        <style>
        </style>
<section class="hero is-fullheight">
  <div class="hero-head ">
    <header class="navbar">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item ">
            <img src="images/nike-128.png" alt="Nike Logo">
          </a>
          <span class="navbar-burger burger" data-target="navbarMenuHeroC">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div id="navbarMenuHeroC" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item is-active">
              Home
            </a>
            <a class="navbar-item">
              Examples
            </a>
            <a class="navbar-item">
              Documentation
            </a>
            <span class="navbar-item">
              <a class="button is-dark is-inverted">
                <span class="icon">
                  <i class="fa fa-shopping-bag"></i>
                </span>
                <span>Shop</span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </header>
  </div>

  <section class="hero video is-mobile">
    <div class="hero-video">
        <video id="bgvid" playsinline autoplay muted loop>
            <source src="https://nikevideo.nike.com/72451143001/201805/2841/72451143001_5783869838001_5783870581001.mp4" type="video/mp4">
        </video>
    </div>
  <section class="hero">
    <div class="hero-body">
    <div class="container has-text-right">
      <h1 class="title">
        The new VaporMax
      </h1>
      <h2 class="subtitle">
        Lorem
      </h2>
    </div>
  </div>
</div>
</section>
</section>

  <!-- Hero footer: will stick at the bottom -->
  <div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
      <div class="container">
        <ul>
          <li class="is-active"><a>Overview</a></li>
          <li><a>Modifiers</a></li>
          <li><a>Grid</a></li>
          <li><a>Elements</a></li>
          <li><a>Components</a></li>
          <li><a>Layout</a></li>
        </ul>
      </div>
    </nav>
  </div>
</section>

Answer 1

您的 bulma.min.css 在移动设备上有一个 display:none 用于 .hero-video。

背景视频在手机上消失

Background video disappearing on mobile

css

bulma