{"id":8910,"date":"2022-03-04T13:00:00","date_gmt":"2022-03-04T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=8910"},"modified":"2024-01-29T11:27:18","modified_gmt":"2024-01-29T10:27:18","slug":"como-poner-un-video-de-fondo-en-html","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/como-poner-un-video-de-fondo-en-html\/","title":{"rendered":"C\u00f3mo poner un v\u00eddeo de fondo en HTML"},"content":{"rendered":"\n

Si quieres saber c\u00f3mo poner un v\u00eddeo de fondo HTML<\/strong>, en la entrada de hoy te ense\u00f1o hacerlo en tu web. Tambi\u00e9n ver\u00e1s c\u00f3mo centrar un v\u00eddeo<\/strong> de fondo en HTML<\/strong> y otros trucos. \u00a1Comenzamos!<\/p>\n\n\n\n\n\n\n\n

\n
\n

A pesar de que las p\u00e1ginas web actuales son cada vez m\u00e1s r\u00e1pidos, est\u00e9ticas y sobre todo responsive<\/strong>, la realidad es que en ocasiones, por buscar este rendimiento en las p\u00e1ginas web, el dise\u00f1o se ve sacrificado y quedan unos dise\u00f1os demasiado planos y poco atractivos. Es por ello que para un proyecto en concreto, puedes decidir sacrificar un poco de rendimiento (poco si se hace correctamente) y darle un toque como dir\u00edamos en nuestro estudio<\/strong>. Ese \u00abtoque\u00bb puede ser perfectamente agregar un v\u00eddeo<\/strong> de fondo HTML en tu web<\/strong>, o en una secci\u00f3n de la misma. <\/p>\n\n\n\n

La realidad es que a\u00f1adir este recurso visual, es una tarea sencilla de ejecutar y que bien realizada, dar\u00e1 ese punto extra de personalidad a tu sitio web. <\/p>\n<\/div>\n\n\n\n

\n
\"A\u00f1ade
A\u00f1ade un v\u00eddeo de fondo a tu p\u00e1gina web<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Antes de avanzar y ense\u00f1arte como a\u00f1adir un v\u00eddeo HTML de fondo a una p\u00e1gina web<\/strong>, vamos a repasar como se debe a\u00f1adir a una p\u00e1gina web<\/p>\n\n\n\n

C\u00f3mo a\u00f1adir un v\u00eddeo HTML<\/h3>\n\n\n\n

Para a\u00f1adir un v\u00eddeo HTML a una p\u00e1gina web, tienes que usar la etiqueta HTML <video> para la apertura, y <\/video> para el cierre. Dentro de esta etiqueta, debes poner la URL y el formato del recurso usando los atributos HTML src <\/strong>y type<\/strong>. <\/p>\n\n\n\n

Adem\u00e1s, es recomendable subir varias versiones del v\u00eddeo a reproducir por si el navegador que use el visitante de tu web, no fuera capaz de reproducir alguno de los formatos. A continuaci\u00f3n se muestra un ejemplo de c\u00f3mo a\u00f1adir un v\u00eddeo HTML a una web<\/strong>. <\/p>\n\n\n\n

<video>\n  <source src=\"movie.mp4\" type=\"video\/mp4\">\n  <source src=\"movie.ogg\" type=\"video\/ogg\">\n   Tu navegador no soporta el formato de video\n<\/video><\/code><\/pre>\n\n\n\n
Para esta etiqueta de v\u00eddeo<\/strong> existen muchos atributos que te aconsejo probar para encontrar el resultado buscado en tu sitio web. Podr\u00e1s encontrar todos los atributos HTML en este enlace<\/a>. <\/p>\n\n\n\n
Una vez que ya hemos refrescado c\u00f3mo a\u00f1adir un v\u00eddeo en una p\u00e1gina web, pasemos a jugar con este recurso, y veamos c\u00f3mo a\u00f1adirlo en el fondo de la p\u00e1gina web.<\/p>\n\n\n\n
C\u00f3mo poner v\u00eddeo de fondo en HTML<\/h2>\n\n\n\n
Bien, vamos a ver como a\u00f1adir un v\u00eddeo de fondo. Lo primero que tenemos que tener claro, es donde queremos ponerlo y que comportamiento tendr\u00e1. Es decir, \u00bfser\u00e1 un v\u00eddeo que este \u00abfijo\u00bb en el fondo mientras el scroll de la p\u00e1gina sigue en movimiento? Un ejemplo: Caronte Web Studio<\/a>. O si, por el contrario, lo que buscas es que sea un v\u00eddeo de fondo en una secci\u00f3n de la p\u00e1gina: DFSK Arregui<\/a><\/p>\n\n\n\n
Veamos ambos ejemplos como podemos realizarlos: <\/p>\n\n\n\n
A\u00f1adir v\u00eddeo HTML en una secci\u00f3n<\/h3>\n\n\n\n
\n  See the Pen \n  Untitled<\/a> by Alberto (@carontestudio<\/a>)\n  on CodePen<\/a>.<\/span>\n<\/p>\n