{"id":6260,"date":"2022-02-10T08:10:06","date_gmt":"2022-02-10T08:10:06","guid":{"rendered":"https:\/\/outstandingthemes.com\/como-centrar-un-video-en-html\/"},"modified":"2024-11-27T21:59:44","modified_gmt":"2024-11-27T21:59:44","slug":"como-centrar-un-video-en-html","status":"publish","type":"post","link":"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/","title":{"rendered":"C\u00f3mo centrar un v\u00eddeo en HTML"},"content":{"rendered":"\n<p>Insertar un v\u00eddeo en una <a href=\"https:\/\/www.tv-pakkepriser.dk\/\">p\u00e1gina web<\/a> HTML puede ser estupendo para tus visitantes. Si est\u00e1s trabajando en un proyecto que te apasiona, tambi\u00e9n puede a\u00f1adir identidad visual al producto final. Quienes trabajen con un proyecto o marca distintos tambi\u00e9n tendr\u00e1n la oportunidad de presentarse a trav\u00e9s del v\u00eddeo.    <\/p>\n\n<p>Al insertar un v\u00eddeo en un documento HTML, puedes utilizar tres m\u00e9todos comunes. Las respuestas a c\u00f3mo centrar un v\u00eddeo en HTML son: <\/p>\n\n<ul><li>Incluir una etiqueta HTML <center> en el documento<\/center><\/li><li>Escribiendo un contenedor <div> para incluir un elemento de v\u00eddeo en el estilo text-align:center<\/div><\/li><li>Incluyendo un margen con un auto 0px y el estilo display:block con el v\u00eddeo<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\">Centrar un v\u00eddeo utilizando la etiqueta <center> <\/center><\/h2>\n\n<p>Este es uno de los m\u00e9todos m\u00e1s sencillos a la hora de insertar un v\u00eddeo en un documento HTML. La etiqueta <center> se utiliza desde hace mucho tiempo y es una de las formas m\u00e1s c\u00f3modas de colocar un v\u00eddeo en medio de una p\u00e1gina. <\/center><\/p>\n\n<p>Si quieres seguir este camino, puedes poner una etiqueta HTML <video> dentro de la etiqueta <center> para tener un v\u00eddeo en medio de la p\u00e1gina. Las etiquetas son las siguientes: <\/center><\/video><\/p>\n\n<p><center><\/center><\/p>\n\n<p><video controls=\"\"><\/video><\/p>\n\n<p><source src=\"video.webm\" type=\"video\/webm\"\/><\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<p>La etiqueta <center> parece ahora un poco obsoleta. Desde entonces, CSS se ha convertido en la herramienta m\u00e1s utilizada para controlar c\u00f3mo se presenta un tipo de contenido. A\u00fan as\u00ed, la etiqueta <center> sigue siendo compatible con todos los navegadores de Internet modernos. No tienes que preocuparte de que desaparezca pronto, aunque alg\u00fan d\u00eda podr\u00eda considerarse una caracter\u00edstica heredada.   <\/center><\/center><\/p>\n\n<h2 class=\"wp-block-heading\">Centrar un v\u00eddeo con la etiqueta <div>, as\u00ed como con text-align:center<\/div><\/h2>\n\n<p>La etiqueta <center> no es una convenci\u00f3n de uso com\u00fan en la mayor\u00eda de los documentos HTML. Hoy en d\u00eda, tambi\u00e9n puedes crear tu propia versi\u00f3n de la etiqueta. Una forma de hacerlo es escribiendo una etiqueta <div> con un text-align:center al lado.  <\/div><\/center><\/p>\n\n<p>Si necesitas seguir utilizando <div> en toda la p\u00e1gina web, puedes incluir un estilo para la clase .center. Esto tendr\u00e1 el siguiente aspecto<\/div><\/p>\n\n<p>div.center {<\/p>\n\n<p>alineaci\u00f3n del texto: centro;<\/p>\n\n<p>}<\/p>\n\n<p>A continuaci\u00f3n, puedes encerrar la etiqueta <video> con <div class=\"center\">:<\/div><\/video><\/p>\n\n<p><div class=\"center\"><\/div><\/p>\n\n<p><video controls=\"\"><\/video><\/p>\n\n<p><source src=\"video.webm\" type=\"video\/webm\"\/><\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<p>El v\u00eddeo se colocar\u00e1 entonces justo en el centro del elemento <div>.<\/div><\/p>\n\n<h2 class=\"wp-block-heading\">Centrar el v\u00eddeo utilizando un margen y un estilo de visualizaci\u00f3n<\/h2>\n\n<p>Puedes elegir no a\u00f1adir una envoltura a la etiqueta <video>. Aunque los otros m\u00e9todos contienen una, no es un requisito previo para centrar tu v\u00eddeo. De hecho, puedes utilizar alg\u00fan estilo directamente en la etiqueta <video>.  <\/video><\/video><\/p>\n\n<p>El estilo es el siguiente:<\/p>\n\n<p>video.center {<\/p>\n\n<p>mostrar: bloque;<\/p>\n\n<p>margen izquierdo: auto;<\/p>\n\n<p>margen-derecha: auto;<\/p>\n\n<p>}<\/p>\n\n<p>El estilo display:block es necesario. El elemento <video> hace uso de display:inline, por lo que excluirlo causar\u00e1 problemas. <\/video><\/p>\n\n<p>Si sustituyes la etiqueta <video> por un elemento de bloque, el margen no funcionar\u00e1 como est\u00e1 previsto. La raz\u00f3n es que un elemento en l\u00ednea s\u00f3lo ocupar\u00e1 el ancho necesario para mostrar su contenido. <\/video><\/p>\n\n<p>Si sustituyes la propiedad display por un bloque, la etiqueta <video> ocupar\u00e1 en su lugar toda la anchura de la p\u00e1gina. Si colocas margin-left y margin-right en \u00abauto\u00bb, el espacio libre del lado izquierdo y derecho se repartir\u00e1 por igual. <\/video><\/p>\n\n<p>Utilizando el CSS anterior, s\u00f3lo tienes que incluir la clase centro en la etiqueta <video>. Puedes hacer esto cada vez que quieras poner un elemento de v\u00eddeo en el centro. El aspecto es el siguiente  <\/video><\/p>\n\n<p><video class=\"center\" controls=\"\"><\/video><\/p>\n\n<p><source src=\"video.webm\" type=\"video\/webm\"\/><\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Centrar un v\u00eddeo de YouTube con HTML<\/h2>\n\n<p>YouTube y Vimeo se encuentran entre los proveedores de v\u00eddeo m\u00e1s comunes. La mayor\u00eda de la gente ve contenido de estos sitios. Puede ayudar mucho a tu sitio web que tus v\u00eddeos est\u00e9n alojados en estas plataformas. Estos sitios web tienen una funci\u00f3n de suscripci\u00f3n que te permite conectar con una audiencia incorporada.   <\/p>\n\n<p>Tambi\u00e9n puedes enlazar la p\u00e1gina web con el canal de YouTube para conseguir una mayor tracci\u00f3n, ya que muchos internautas acuden diariamente a la plataforma.<\/p>\n\n<p>Si est\u00e1s incrustando un v\u00eddeo de YouTube en tu p\u00e1gina web, se te pedir\u00e1 que incluyas una etiqueta <iframe>. A continuaci\u00f3n, se replicar\u00e1, apareciendo en tu texto HTML. YouTube tiene la capacidad de distribuir v\u00eddeos mediante un c\u00f3digo de incrustaci\u00f3n a trav\u00e9s de la funci\u00f3n de compartir.  <\/iframe><\/p>\n\n<p>Lee tambi\u00e9n <a href=\"https:\/\/fixthephoto.com\/video-editing-services\">Servicios de edici\u00f3n de v\u00eddeo<\/a> de fixthephoto.com y echa un vistazo a lo que pueden hacer para que tu v\u00eddeo destaque.<\/p>\n\n<p>Este es el aspecto que suele tener el c\u00f3digo de incrustaci\u00f3n de YouTube:<\/p>\n\n<p><iframe><\/iframe><\/p>\n\n<p>width=\u00bb560&#8243;<\/p>\n\n<p>height=\u00bb315&#8243;<\/p>\n\n<p>src=\u00bbhttps:\/\/www.youtube.com\/embed\/<video-id>\u00ab<\/video-id><\/p>\n\n<p>title=\u00bbReproductor de v\u00eddeo de YouTube\u00bb<\/p>\n\n<p>frameborder=\u00bb0&#8243;<\/p>\n\n<p>allowfullscreen<\/p>\n\n<p>&gt;<\/p>\n\n<p>Si quieres centrar el v\u00eddeo de YouTube, puedes utilizar cualquiera de los m\u00e9todos mencionados. Vimeo suele utilizar el mismo c\u00f3digo de incrustaci\u00f3n, con s\u00f3lo unos pocos par\u00e1metros cambiados para reflejar el sitio web. Puede que tengas que comprobar con otros proveedores de v\u00eddeo si su c\u00f3digo de incrustaci\u00f3n es similar al que utiliza YouTube. La mayor\u00eda de los sitios web proporcionan el c\u00f3digo de incrustaci\u00f3n a trav\u00e9s de sus enlaces para compartir.   <\/p>\n\n<p>Centrar un v\u00eddeo utilizando HTML es una de las tareas m\u00e1s sencillas que puedes hacer con etiquetas, CSS o c\u00f3digos de incrustaci\u00f3n. Una vez que lo domines, podr\u00e1s incluir tantos v\u00eddeos como puedas en la p\u00e1gina. \u00a1Si\u00e9ntete libre de centrar cualquier v\u00eddeo que se ajuste a tu p\u00e1gina web!  <\/p>\n","protected":false},"excerpt":{"rendered":"Insertar un v\u00eddeo en una p\u00e1gina web HTML puede ser estupendo para tus visitantes. Si est\u00e1s trabajando en&hellip;","protected":false},"author":7829,"featured_media":6262,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[706,705,697],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo centrar un v\u00eddeo en HTML - Outstanding Themes<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo centrar un v\u00eddeo en HTML - Outstanding Themes\" \/>\n<meta property=\"og:description\" content=\"Insertar un v\u00eddeo en una p\u00e1gina web HTML puede ser estupendo para tus visitantes. Si est\u00e1s trabajando en&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Outstanding Themes\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-10T08:10:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-27T21:59:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png\" \/>\n\t<meta property=\"og:image:width\" content=\"864\" \/>\n\t<meta property=\"og:image:height\" content=\"550\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"outstandingthemes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"outstandingthemes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/\",\"url\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/\",\"name\":\"C\u00f3mo centrar un v\u00eddeo en HTML - Outstanding Themes\",\"isPartOf\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png\",\"datePublished\":\"2022-02-10T08:10:06+00:00\",\"dateModified\":\"2024-11-27T21:59:44+00:00\",\"author\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a\"},\"breadcrumb\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/#primaryimage\",\"url\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png\",\"contentUrl\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png\",\"width\":864,\"height\":550},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/outstandingthemes.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo centrar un v\u00eddeo en HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/#website\",\"url\":\"https:\/\/outstandingthemes.com\/es\/\",\"name\":\"Outstanding Themes\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/outstandingthemes.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a\",\"name\":\"outstandingthemes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g\",\"caption\":\"outstandingthemes\"},\"url\":\"https:\/\/outstandingthemes.com\/es\/author\/outstandingthemes\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo centrar un v\u00eddeo en HTML - Outstanding Themes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo centrar un v\u00eddeo en HTML - Outstanding Themes","og_description":"Insertar un v\u00eddeo en una p\u00e1gina web HTML puede ser estupendo para tus visitantes. Si est\u00e1s trabajando en&hellip;","og_url":"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/","og_site_name":"Outstanding Themes","article_published_time":"2022-02-10T08:10:06+00:00","article_modified_time":"2024-11-27T21:59:44+00:00","og_image":[{"width":864,"height":550,"url":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png","type":"image\/png"}],"author":"outstandingthemes","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"outstandingthemes","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/","url":"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/","name":"C\u00f3mo centrar un v\u00eddeo en HTML - Outstanding Themes","isPartOf":{"@id":"https:\/\/outstandingthemes.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/#primaryimage"},"image":{"@id":"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/#primaryimage"},"thumbnailUrl":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png","datePublished":"2022-02-10T08:10:06+00:00","dateModified":"2024-11-27T21:59:44+00:00","author":{"@id":"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a"},"breadcrumb":{"@id":"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/#primaryimage","url":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png","contentUrl":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/code.png","width":864,"height":550},{"@type":"BreadcrumbList","@id":"https:\/\/outstandingthemes.com\/es\/como-centrar-un-video-en-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/outstandingthemes.com\/es\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo centrar un v\u00eddeo en HTML"}]},{"@type":"WebSite","@id":"https:\/\/outstandingthemes.com\/es\/#website","url":"https:\/\/outstandingthemes.com\/es\/","name":"Outstanding Themes","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/outstandingthemes.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a","name":"outstandingthemes","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g","caption":"outstandingthemes"},"url":"https:\/\/outstandingthemes.com\/es\/author\/outstandingthemes\/"}]}},"_links":{"self":[{"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/posts\/6260"}],"collection":[{"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/users\/7829"}],"replies":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/comments?post=6260"}],"version-history":[{"count":1,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/posts\/6260\/revisions"}],"predecessor-version":[{"id":6264,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/posts\/6260\/revisions\/6264"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/media\/6262"}],"wp:attachment":[{"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/media?parent=6260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/categories?post=6260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/tags?post=6260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}