Fondo de vídeo y diseño web responsive

Cómo eliminar el vídeo de cabecera en dispositivos móviles

Vamos a empezar con los dispositivos móviles; mi opinión personal es que en las pantallas de móviles es mejor no mostrar el video, en su lugar aparecerá una imagen que proporciona un aspecto estilístico similar sin el elemento de vídeo. El razonamiento detrás de esto es que en general los vídeos tienen tamaños mucho más grandes que las imágenes y se cargan más lentamente - esto podría no ser un problema en una computadora de escritorio, pero para la mayoría de usuarios móviles la velocidad es la esencia y reducir el tiempo de carga debe ser una prioridad. También hay otro problema en los dispositivos que utilizan iOS, ya que este sistema operativo no permite vídeos en reproducción automática, por lo que habría necesidad de poner en práctica algunos botones/controles para reproducir/detener el vídeo, lo que afecta a la experiencia del usuario.

Así que, vamos a hacer desaparecer este video. Suponiendo que hayas utilizado la opción para añadir un vídeo que he cubierto en mi último artículo (es decir, con la etiqueta video de HTML5), y si el ancho de la ventana gráfica por defecto fijado en tu página es 640px. Mediante el uso de media queries podemos ocultar nuestro vídeo y mostrar una imagen en su lugar cuando se cumplan ciertas condiciones:

@media (max-width: 640px) {
    #header {
        background: url(path_to_your_image) #000!important;
        background-size: cover;
    }
    #bg-video { display: none; }
}

En este código también he utilizado la propiedad CSS background size y establecida en "cover", que escala la imagen de fondo a ser tan grande como sea posible para que el área de encabezado esté completamente cubierta por la imagen. El código anterior se debe agregar en el archivo css/override.css (en el caso de Joomla) o en un plugin CSS personalizado (para WordPress).

Ajuste del encabezado en otros dispositivos

En general, cuando cambia el tamaño del navegador se debería ver que, en consecuencia, el vídeo también cambia el tamaño; esto es porque la propiedad de ancho (width) se establece en 100%. Sin embargo, en pantallas de tamaños tablet y similares es posible que parte de la cabecera (es decir, los iconos) no sean visibles; si son o no depende de la anchura, altura y relación del video y, por supuesto, en el contenido de la cabecera (logotipo, iconos, texto, etc). Para propósitos de prueba voy a utilizar un vídeo de ancho completo (1920 x 1080) y un contenido de cabecera estándard.

Los problemas comienzan cuando el ancho de la ventana gráfica llega a 1100px; puedes comprobar esto utilizando extensiones del navegador como Viewport Dimensions o abriendo tu sitio web en un viewport resizer.

Para contrarrestar este problema, tendremos que reducir o eliminar algunos contenidos en este tamaño de pantalla, que podemos lograr uniendo reglas CSS a la siguiente media query:

@media (max-width: 1100px) {
  #header-mod h1 {
    font-size: 26px!important;
    padding-top: 0;
  }
 
  #header-mod h2 {
    font-size: 18px;
  }
 
  #header-mod .logo {
    -webkit-transform: scale(0.7, 0.7);
    -ms-transform: scale(0.7, 0.7);
    -o-transform: scale(0.7, 0.7);
    transform: scale(0.7, 0.7);
  }
 
  #header-mod .short-menu i {
    font-size: 40px!important;
  }
 
  #header-mod .btn {
    height: 50px;
    line-height: 50px;
  }
}

Generalmente no debemos usar !important con reglas CSS, pero en algunos casos es necesario cuando no queremos anular otras reglas CSS responsives ya incluidas en el diseño.

Después de fijar el contenido en 1100px, podemos continuar el cambio de tamaño de nuestra ventana del navegador para ver si todo está arreglado. Probablemente notarás que aunque todo está bien en 1100px, una vez que llegamos alrededor de 880px tenemos una vez más algunos problemas de pantalla. Para evitar esto, tenemos que añadir otro valor de media query con correcciones:

@media (max-width: 880px) {
    #header-mod .logo.logo-css {
        margin: 0 auto!important;
    }
 
    #header-mod .short-menu li {
        margin: 0px 10px;
    }
 
    #header-mod h2 {
        display: none;
    }
 
    #header-mod .short-menu {
        margin: 10px 0 40px 0;
    }
 
    #header-mod .btn {
        margin-top: 5px;
    }
    #header-mod .short-menu li {
        line-height: 1.2;
    }
}

y eso es todo. Ahora, una vez que nuestra ventana cae por debajo de un ancho de 640px, nuestro vídeo se sustituye por la imagen y nuestro trabajo está hecho.

Artículo original: Video background and responsive web design.