Poner un fondo fijo en los vídeos de html5 con CSS

El otro día en un cliente tuvimos que desactivar la pre-carga de los vídeos html5 (podéis ver cómo aquí). Esto tiene una ventaja….la web carga mejor. Pero una desventaja también, no aparece la imagen de presentación del vídeo.

En nuestro caso decidimos poner el mismo para todos, así que pusimos un fondo a la etiqueta video de html5. También es buena solución para encajar ese fondo en todos los dispositivos.

Tenemos que poner en el CSS correspondiente:

video { 
   width:300px; 
   height:150px;  
   background:transparent url('urldelficheroimangen') no-repeat 0 0; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
}

Aquí evidentemente tenemos que cambiar el ancho y alto por los que queramos para nuestros vídeos y la url del background por la de nuestra imagen. También modificar el resto de parámetros según convenga.

Y ya está 😀