Fondo de vÃdeo y diseño web responsive
- Internet (Tutoriales y trucos)
- Posted
- ¡Escribe el primer comentario!
- Visto 3377 veces
Cómo eliminar el vÃdeo de cabecera en dispositivos móviles
Como hemos visto recientemente los fondos de vÃdeo se han convertido en una adición muy popular para los sitios web modernos, y mi último artÃculo fue recibido con gran interés por parte de los lectores; de hecho, muchos de nuestros usuarios han preguntado acerca de esta solución. La mayorÃa de las preguntas se centraron en el control de la cabecera de vÃdeo en la tableta o versiones móviles de su sitio. Asà que en este artÃculo voy a hacer mi mejor esfuerzo para ayudar a mejorar sus cabeceras un poco.
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.
Lo último de Jesús Cáceres
- Signal vs.Telegram: ¿Cuál es la mejor aplicación de mensajerÃa?
- La NSA sugiere que las empresas utilicen solucionadores de DNS sobre HTTPS 'designados'
- WhatsApp da marcha atrás para el 'intercambio de datos' con Facebook
- El nuevo Windows 10X apunta a la simplicidad
- ¿Qué es Signal y por qué la usan todos?
Deja tus comentarios
- Publicar comentario como invitado. RegÃstrate o ingresaa tu cuenta