El video de fondo desaparece en el dispositivo móvil

Igu Publicado en Dev

Igu

Tengo algunos problemas con un video de fondo, cuando la página alcanza cierta resolución, desaparece. Pensé en sustituir el video por una imagen en una determinada resolución, sin embargo, sería extraño (la transición).

CodePen: https://codepen.io/anon/pen/WJPRqm

Estoy usando el marco Bulma por cierto.

<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>

itamar

Tu bulma.min.csstienes un display:nonepara .hero-videoen el móvil.

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en2020-11-30

Déjame decir algunas palabras

0Comentarios

Iniciar sesiónRevisión de participación posterior

Anterior:Cómo resolver el problema de laravel 5

TOP Lista

Artículos

El video de fondo desaparece en el dispositivo móvil

El video de fondo desaparece en el dispositivo móvil

¿Cómo ocultar la aplicación web de los robots de búsqueda? (ASP.NET)

Limitar las entradas de One2many Lines en odoo

Ver todos los comentarios en un video de YouTube

Declaración if simple en intérprete de python

¿La mejor manera de construir la GUI de Java Swing?

Cómo conectar Flutter con MongoDB

Leer Azure Key Vault Secret de la aplicación Function

Importar archivo js con TypeScript 2.0

BeautifulSoup: extraer texto de la etiqueta de anclaje

Cerrar el menú de material angular desde el controlador

Error de menú desplegable en Bootstrap 4

La mejor manera de iterar SortedSet / SortedMap en Java al revés

¿Precedencia de operadores?

Google 스프레드 시트 : QUERY를 사용하여 그룹 내 상위 N 개 케이스 선택

Intentando reproducir mp3 usando Vue.js

Extraction du nœud enfant de la réponse JSON à l'aide du script SoapUI-Groovy

Comparer des images dans Pygame (pas pixel par pixel)

Estructura de la carpeta del proyecto Spring Boot para el cliente de descanso

Validación de formulario Angular 4

La mejor manera de leer archivos binarios estructurados con Java

cómo usar% dopar% cuando solo se importa foreach en la DESCRIPCIÓN de un paquete