{"id":154,"date":"2019-06-08T13:24:19","date_gmt":"2019-06-08T13:24:19","guid":{"rendered":"https:\/\/alexcgdesign.com\/blog\/?p=154"},"modified":"2019-06-08T13:35:34","modified_gmt":"2019-06-08T13:35:34","slug":"como-agregar-video-como-fondo-en-una-pagina-web-con-html-y-css","status":"publish","type":"post","link":"https:\/\/alexcgdesign.com\/blog\/como-agregar-video-como-fondo-en-una-pagina-web-con-html-y-css\/","title":{"rendered":"Como agregar video como fondo en una p\u00e1gina web con HTML y CSS"},"content":{"rendered":"<p>Hey, hola qu\u00e9 tal,esta vez aprenderemos acerca de<strong> como agregar video como fondo de p\u00e1gina web con HTML y CSS<\/strong> el cual es uno de los principales recursos en un sitio web, te escribe Jordan Alexander de AlexCG Design y empezamos.<\/p>\n<p>Recordemos que los\u00a0<strong>videos de fondo en las paginas web con HTML son\u00a0<\/strong>uno de los mejores recursos que puede tener una p\u00e1gina web, ya que te ayudar\u00e1 a dar un vistazo m\u00e1s cercano de lo que va la tem\u00e1tica de tu sitio web.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"size-thumbnail wp-image-156\" src=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/7th-Architecture-Summit-720x405.png\" alt=\"Como poner video de fondo en HTML5 y CSS3\" width=\"720\" height=\"405\" srcset=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/7th-Architecture-Summit-720x405.png 720w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/7th-Architecture-Summit-300x169.png 300w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/7th-Architecture-Summit-768x432.png 768w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/7th-Architecture-Summit-1024x576.png 1024w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/7th-Architecture-Summit.png 1280w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<h3><\/h3>\n<h3><b><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/26a0.svg\" alt=\"\u26a0\ufe0f\" \/><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/270b.svg\" alt=\"\u270b\" \/>\u00a0Antes de seguir leyendo:\u00a0<\/b>Si no has visto el tutorial de YouTube\u00a0<strong>Como crear una tabla de precios animada con HTML Y CSS<\/strong>\u00a0\u00bfQue esperas? Puedes verlo aqu\u00ed abajo:\u00a0<img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f447.svg\" alt=\"\ud83d\udc47\" \/><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f447.svg\" alt=\"\ud83d\udc47\" \/><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f447.svg\" alt=\"\ud83d\udc47\" \/><\/h3>\n<p><iframe title=\"Como AGREGAR VIDEO como FONDO en una PAGINA WEB con HTML y CSS\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/j5vYLYZjecI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h3>Recursos usados para crear el proyecto:<\/h3>\n<p>\ud83d\udccc Pexels Video:<\/p>\n<p><a href=\"https:\/\/www.pexels.com\/videos\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.pexels.com\/videos\/<\/a><\/p>\n<figure id=\"attachment_165\" aria-describedby=\"caption-attachment-165\" style=\"width: 720px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.pexels.com\/videos\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"size-thumbnail wp-image-165\" src=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/agregar-un-video-de-pexels-720x345.png\" alt=\"agregar un video de pexels\" width=\"720\" height=\"345\" srcset=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/agregar-un-video-de-pexels-720x345.png 720w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/agregar-un-video-de-pexels-300x144.png 300w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/agregar-un-video-de-pexels-768x369.png 768w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/agregar-un-video-de-pexels-1024x491.png 1024w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/agregar-un-video-de-pexels.png 1365w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><figcaption id=\"caption-attachment-165\" class=\"wp-caption-text\">agregar un video de pexels<\/figcaption><\/figure>\n<p>Pexels Video es un banco de imagenes libre de derechos de autor, la cual te ayudar\u00e1 en el camino de poder\u00a0<strong>agregar videos como fondo con HTML y CSS, <\/strong>ya que s\u00f3lo es cuesti\u00f3n de descargar el video de manera gratutita en la p\u00e1gina de los cuales hay bastantes tematicas, como naturaleza, negocios, tecnolog\u00eda etc, <strong>y agregarlo como fondo de una pagina web con HTML y CSS.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>Sin olvidarnos que como la mayor\u00eda de nuestros proyectos, podremos usar <strong>el video de fondo con HTML y CSS <\/strong>ya que<strong>\u00a0<\/strong>est\u00e1 completamente adaptado a dispositivos m\u00f3viles por lo que cualquier persona puede apreciarlo desde cualquier dispositivo.<\/p>\n<p>Puedes complementer este proyecto con: <a href=\"https:\/\/alexcgdesign.com\/blog\/crea-una-pagina-web-moderna-desde-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">Como crear una pagina web desde 0<\/a><\/p>\n<p>Recuerda que como la mayor\u00eda de nuestros proyectos, en la parte final del BLOG se encuentra el link para descargar los archivos base del proyecto: <strong>Como agregar un video de fondo en una pagina web con HTML y CSS <\/strong>para que lo puedas implementar ahora mismo en tu proyecto personal o lo uses para practicar.<\/p>\n<h3><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f53b.svg\" alt=\"\ud83d\udd3b\" \/>M\u00e1s informaci\u00f3n:<\/h3>\n<p><a href=\"http:\/\/bit.ly\/2J0ptHI\" target=\"_blank\" rel=\"noopener noreferrer\">Inv\u00edtame un caf\u00e9:<img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/2615.svg\" alt=\"\u2615\ufe0f\" \/>\u00a0[Dando click aqu\u00ed]<\/a><\/p>\n<p><a href=\"http:\/\/www.mediafire.com\/file\/56ckr2rgkcanup3\/Video+AlexCG+Design.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Descarga los archivos base<img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f381.svg\" alt=\"\ud83c\udf81\" \/>\u00a0[Dando click aqu\u00ed]<\/a><\/p>\n<p>Por \u00faltimo no olvides suscribirte a nuestro canal de Youtube\u00a0<a href=\"https:\/\/www.youtube.com\/alexcgdesign\" target=\"_blank\" rel=\"noopener noreferrer\">AlexCG Design<\/a>\u00a0y tambi\u00e9n seguirnos en todas nuestras redes sociales,\u00a0<b>si te fue de ayuda no olvides compartir el v\u00eddeo y darle like, eso nos ayudar\u00eda much\u00edsimo a seguir dando contenido de valor.<\/b><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey, hola qu\u00e9 tal,esta vez aprenderemos acerca de como agregar video como fondo de p\u00e1gina web con HTML y CSS el cual es uno de los principales recursos en un sitio web, te escribe Jordan Alexander de AlexCG Design y empezamos. Recordemos que los\u00a0videos de fondo en las paginas web con HTML son\u00a0uno de los [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":156,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,4,3],"tags":[21,22],"class_list":["post-154","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-paginas-web","category-plantillas-de-web","tag-agregar-video-de-fondo-en-html-y-css","tag-agregar-video-de-fondo-en-pagina-web"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":0,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media\/156"}],"wp:attachment":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}