{"id":9524,"date":"2020-08-04T12:13:46","date_gmt":"2020-08-04T15:13:46","guid":{"rendered":"https:\/\/www.neolo.com\/blog\/?p=9524"},"modified":"2020-08-04T12:13:46","modified_gmt":"2020-08-04T15:13:46","slug":"como-incrustar-un-video-de-youtube","status":"publish","type":"post","link":"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php","title":{"rendered":"C\u00f3mo incrustar un video de YouTube"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tiempo de lectura:<\/span> <span class=\"rt-time\"> 7<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n\n\n<p>Uno de los\nelementos que m\u00e1s dificultan la buena experiencia del usuario es la visualizaci\u00f3n\nde un video en YouTube, es por ello que, en esta ocasi\u00f3n, te vamos a ense\u00f1ar <strong>c\u00f3mo\nincrustar un video de YouTube<\/strong> correctamente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 incrustar un video de YouTube en un sitio web?<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"500\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/Por-qu\u00e9-incrustar-un-video-de-YouTube-en-nuestro-sitio-web.jpg\" alt=\"\" class=\"wp-image-9539\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/Por-qu\u00e9-incrustar-un-video-de-YouTube-en-nuestro-sitio-web.jpg 750w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/Por-qu\u00e9-incrustar-un-video-de-YouTube-en-nuestro-sitio-web-300x200.jpg 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption>Es importante incrustar nuestros videos de YouTube para que sean visualizados en cualquier dispositivo. <\/figcaption><\/figure><\/div>\n\n\n\n<p>Adem\u00e1s de visualizar nuestros videos favoritos en YouTube, esta plataforma tambi\u00e9n nos ofrece la posibilidad de incrustarlos en nuestro <a href=\"https:\/\/www.neolo.com\/es\/crea-tu-sitio-web\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"sitio web (se abre en una nueva pesta\u00f1a)\">sitio web<\/a> para facilitarle el acceso de este contenido a nuestra audiencia.<\/p>\n\n\n\n<p>Igualmente, insertar video de esta plataforma a nuestra web permite que enriquezcamos nuestros contenidos, y diversifiquemos lo que ofrecemos a nuestro p\u00fablico. <\/p>\n\n\n\n<p>Como ya sabemos, actualmente, cada d\u00eda son m\u00e1s los usuarios que prefieren ver videos o im\u00e1genes sobre el tema que les interesa en Internet a trav\u00e9s de sus tel\u00e9fonos m\u00f3viles.  <\/p>\n\n\n\n<p>Por lo tanto, es importante conocer el m\u00e9todo de incrustar un video de YouTube en nuestro sitio web que tambi\u00e9n se adapte a la pantalla de cualquier dispositivo. <\/p>\n\n\n\n<p>Otra ventaja de incorporar video de YouTube en nuestro sitio web o blog, es que no tendr\u00e1s que preocuparte por ocupar espacio en disco de tu <a href=\"https:\/\/www.neolo.com\/es\/web-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"servicio de hosting  (se abre en una nueva pesta\u00f1a)\"><strong>servicio de hosting<\/strong> <\/a>o el uso de ancho de banda. <\/p>\n\n\n\n<p>Desafortunadamente, para algunos usuarios, incrustar uno o varios videos de YouTube en una web se convierte en una labor engorrosa, especialmente para que sean visualizados en cualquier dispositivo m\u00f3vil. <\/p>\n\n\n\n<p>Veamos entonces, c\u00f3mo hacerlo f\u00e1cil y r\u00e1pidamente en unos pocos pasos. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 algunas veces es dif\u00edcil incrustar un video de YouTube?<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"732\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/Por-qu\u00e9-algunas-veces-es-dif\u00edcil-incrustar-un-v\u00eddeo-de-YouTube-en-un-sitio-web-1024x732.jpg\" alt=\"\" class=\"wp-image-9540\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/Por-qu\u00e9-algunas-veces-es-dif\u00edcil-incrustar-un-v\u00eddeo-de-YouTube-en-un-sitio-web-1024x732.jpg 1024w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/Por-qu\u00e9-algunas-veces-es-dif\u00edcil-incrustar-un-v\u00eddeo-de-YouTube-en-un-sitio-web-300x215.jpg 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/Por-qu\u00e9-algunas-veces-es-dif\u00edcil-incrustar-un-v\u00eddeo-de-YouTube-en-un-sitio-web-768x549.jpg 768w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/Por-qu\u00e9-algunas-veces-es-dif\u00edcil-incrustar-un-v\u00eddeo-de-YouTube-en-un-sitio-web-1536x1098.jpg 1536w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/Por-qu\u00e9-algunas-veces-es-dif\u00edcil-incrustar-un-v\u00eddeo-de-YouTube-en-un-sitio-web.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Muchos usuarios suelen confundirse con el c\u00f3digo HTML a la hora de insertar sus videos de YouTube.<\/figcaption><\/figure><\/div>\n\n\n\n<p>Aunque no lo parezca, insertar un video de YouTube suele ser una tarea sencilla, sin embargo, muchos usuarios tambi\u00e9n suelen confundirse con el c\u00f3digo a la hora de incrustar uno o varios videos de YouTube en un sitio web.<\/p>\n\n\n\n<p>Incrustar un <strong>video de YouTube<\/strong> de forma incorrecta puede causar un poco de frustraci\u00f3n en el usuario que ingresa a tu sitio web o <a href=\"https:\/\/www.neolo.com\/blog\/como-crear-un-blog.php\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"blog (se abre en una nueva pesta\u00f1a)\">blog<\/a>, ya que obstaculiza su adecuada visualizaci\u00f3n y el resto del contenido del sitio.<\/p>\n\n\n\n<p>Como ya sabemos,\ncuando un video tarda en reproducirse, los visitantes suelen salirse la p\u00e1gina\nen pocos segundos, lo que a su vez genera que el posicionamiento de la web se\nvea afectada, y que la tasa de rebote de los usuarios sea mayor. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo incrustar un video de YouTube en un sitio web?<\/h2>\n\n\n\n<figure class=\"wp-block-embed-youtube aligncenter wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"WordPress: insertar video de YouTube (forma profesional)\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/_U3AF3cC_s0?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>\n<\/div><figcaption>C\u00f3mo insertar un video de YouTube en un sitio web WordPress. <\/figcaption><\/figure>\n\n\n\n<p>Existen algunos\nm\u00e9todos para incrustar un video de YouTube en un sitio web, sin embargo, no\ntodos resultan ideales, como veremos a continuaci\u00f3n.<\/p>\n\n\n\n<p>No obstante, lo\nprimero que debemos hacer es buscar el video que queremos insertar en nuestra\nweb. Intenta que sea un video que est\u00e9 bien relacionado con tu contenido, en\ncaso de que no lo hayas creado t\u00fa mismo.<\/p>\n\n\n\n<p>El siguiente\npaso podemos hacerlo a trav\u00e9s de los siguientes m\u00e9todos que te presentamos a\ncontinuaci\u00f3n. Pero primero, conoce los pros y contras de cada uno antes de\ndecirte por uno de ellos.<\/p>\n\n\n\n<p>\u00a1Veamos!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9todo cl\u00e1sico y oficial de YouTube<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"869\" height=\"583\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/metodo-de-youtube.jpg\" alt=\"\" class=\"wp-image-9525\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/metodo-de-youtube.jpg 869w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/metodo-de-youtube-300x201.jpg 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/metodo-de-youtube-768x515.jpg 768w\" sizes=\"auto, (max-width: 869px) 100vw, 869px\" \/><figcaption>Haz clic en \u00abCompartir\u00bb. <\/figcaption><\/figure><\/div>\n\n\n\n<p>En primer lugar,\ntenemos el m\u00e9todo cl\u00e1sico de YouTube para insertar un video. No obstante, este\nm\u00e9todo a veces causa algunas complicaciones.<\/p>\n\n\n\n<p>Se trata del\nconocido uso de la etiqueta <strong>iframe<\/strong>. <\/p>\n\n\n\n<p>As\u00ed pues, una\nvez hemos seleccionado el video que queremos incrustar, procedemos a hacer clic\nen la opci\u00f3n <strong>\u201cCompartir\u201d <\/strong>ubicado debajo del video de YouTube.<\/p>\n\n\n\n<p>Luego, se abrir\u00e1 una ventana en la que se te mostrar\u00e1n los iconos de las diferentes redes sociales en las que podemos compartir el video, como <strong>Facebook, Twitter, Tumblr, Pinterest, Google +,<\/strong> entre otros. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"315\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/incrustar.jpg\" alt=\"\" class=\"wp-image-9526\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/incrustar.jpg 548w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/incrustar-300x172.jpg 300w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><figcaption>Luego, clic en \u00abIncorporar\u00bb.<\/figcaption><\/figure><\/div>\n\n\n\n<p>Como no es esto lo que nos interesa por los momentos, nuestro siguiente paso ser\u00e1 hacer clic sobre el \u00edcono <strong>\u201cInsertar\u201d <\/strong>que muestra los s\u00edmbolos:<strong> &lt; &gt;.<\/strong><\/p>\n\n\n\n<p>Posteriormente, se\nabrir\u00e1 un nuevo men\u00fa en donde podr\u00e1s seleccionar algunas opciones para mostrar\na los usuarios, como \u201cmostrar sugerencias al finalizar el video\u201d o \u201cmostrar los\ncontroles de reproducci\u00f3n\u201d.<\/p>\n\n\n\n<p>Si decides dejar\nmarcada la casilla de mostrar sugerencias al finalizar el video, ten en cuenta\nde que podr\u00e1n mostrarse videos de tu competencia, por lo que te recomendamos desactivar\nesta casilla para mantener a tu audiencia en tu sitio web, y evitar que se\ndistraiga con otros contenidos.<\/p>\n\n\n\n<p>Selecciona las opciones de tu preferencia, y luego, haz clic en el \u00edcono que dice <strong>\u201cCopiar\u201d<\/strong>. Finalmente, el texto de c\u00f3digo se rellenar\u00e1 de azul como indicador de que el <strong>c\u00f3digo HTML<\/strong> ha sido copiado correctamente. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"396\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/copiar-embed-1024x396.jpg\" alt=\"\" class=\"wp-image-9528\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/copiar-embed-1024x396.jpg 1024w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/copiar-embed-300x116.jpg 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/copiar-embed-768x297.jpg 768w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/copiar-embed.jpg 1144w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Copia el enlace para incorporar el video de YouTube. <\/figcaption><\/figure><\/div>\n\n\n\n<p>Ahora podr\u00e1s\ncopiar este c\u00f3digo en tu sitio web. Sin embargo, debes saber que este m\u00e9todo\npresenta algunos inconvenientes como veremos en breve. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u00bfD\u00f3nde copiar el c\u00f3digo HTML si tengo un sitio web de WordPress?<\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"485\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/insertar-codigo-html-1024x485.jpg\" alt=\"\" class=\"wp-image-9527\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/insertar-codigo-html-1024x485.jpg 1024w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/insertar-codigo-html-300x142.jpg 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/insertar-codigo-html-768x364.jpg 768w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/insertar-codigo-html.jpg 1219w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>A\u00f1ade el c\u00f3digo en la pesta\u00f1a \u00abEditor de C\u00f3digo\u00bb. <\/figcaption><\/figure><\/div>\n\n\n\n<p>Si se trata de\nuna entrada o p\u00e1gina de un blog o sitio web de WordPress, copiar el c\u00f3digo es\nbastante sencillo.<\/p>\n\n\n\n<p>Dentro del editor de texto de <strong>WordPress<\/strong> ver\u00e1s dos pesta\u00f1as: una de ellas es la ventana visual, y la otra donde podemos ver nuestro contenido en <strong>c\u00f3digo HTML.<\/strong><\/p>\n\n\n\n<p>Es en esta\nsegunda pesta\u00f1a donde debemos insertar nuestro c\u00f3digo obtenido de YouTube.\nAntes pegar tu c\u00f3digo, aseg\u00farate de que est\u00e9 en el lugar que deseas que aparezca\na tus visitantes.<\/p>\n\n\n\n<p>Una vez hayas\ninsertado el c\u00f3digo, podr\u00e1s retornar a la pesta\u00f1a de visualizaci\u00f3n y se te\nmostrar\u00e1 el video incorporado en la ubicaci\u00f3n seleccionada.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u00bfPor qu\u00e9 no siempre es factible insertar un video de YouTube con el m\u00e9todo\noficial?<\/h4>\n\n\n\n<p>La t\u00e9cnica oficial\nproporcionada por la plataforma es bastante breve y f\u00e1cil de hacer. <\/p>\n\n\n\n<p>Sin embargo, este\nprocedimiento incluye algunas caracter\u00edsticas que podr\u00edan no convenirnos completamente,\ncomo, por ejemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Se cargan recursos adicionales como: <strong>im\u00e1genes,\nCSS y JavaScript<\/strong> necesarios para reproducir el video. <\/li><li>Esto recursos se descargar\u00e1n incluso si el\nusuario no reproduce el video, por lo que ralentizar\u00eda la velocidad de carga\ndel sitio web. <\/li><li>Si tu p\u00e1gina o sitio web contiene m\u00e1s videos\nincrustados de esta forma, el tiempo de carga podr\u00eda ser superior. <\/li><li>Otro de los problemas que genera este tipo de incrustaci\u00f3n\nes que no suele adaptarse al dise\u00f1o responsive de los dispositivos m\u00f3viles. Esto\nse debe a que, ya que tiene una <strong>altura y ancho fijos<\/strong>, indicados en la misma\netiqueta del iframe.<\/li><\/ul>\n\n\n\n<p>Afortunadamente,\nhay un m\u00e9todo mucho m\u00e1s efectivo para incorporar videos de <strong>YouTube <\/strong>que se\nadapten a la pantalla de cualquier dispositivo responsive. Veamos cu\u00e1l es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9todo alternativo para incrustar un video de YouTube y que se vea responsive <\/h3>\n\n\n\n<p>Esta t\u00e9cnica es sumamente sencilla, solo debe borrar el alto y el ancho del video que deseas incrustar en tu sitio web, como te se\u00f1alamos en el siguiente c\u00f3digo de ejemplo:<\/p>\n\n\n\n<p>&lt;iframe <s>width=\u00bb560&#8243; height=\u00bb315&#8243;<\/s> src=\u00bbhttps:\/\/www.youtube.com\/embed\/GvEEpSb_zas\u00bb frameborder=\u00bb0&#8243; allow=\u00bbaccelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\u00bb allowfullscreen&gt;&lt;\/iframe&gt;<\/p>\n\n\n\n<p>Luego, debemos crear una etiqueta llamada <strong>div con class responsive<\/strong> como veremos a continuaci\u00f3n, donde insertaremos el c\u00f3digo anterior del video: <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"899\" height=\"179\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/div-clase-responsive.jpeg\" alt=\"\" class=\"wp-image-9530\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/div-clase-responsive.jpeg 899w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/div-clase-responsive-300x60.jpeg 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/div-clase-responsive-768x153.jpeg 768w\" sizes=\"auto, (max-width: 899px) 100vw, 899px\" \/><figcaption>Visualizaci\u00f3n del c\u00f3digo dentro de div class.<\/figcaption><\/figure><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"video-responsive\">\n   &lt;iframe src=\"https:\/\/www.youtube.com\/embed\/GvEEpSb_zas\" frameborder=\"0\" \n   allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in- \n   picture\" allowfullscreen>&lt;\/iframe>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Ahora, a\u00f1adimos en la <strong>etiqueta &lt;HEAD&gt;<\/strong> una etiqueta de estilo <strong>&lt;STYLE&gt;<\/strong> con la siguiente <strong>regla<\/strong> <strong>CSS<\/strong>:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"790\" height=\"365\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/head.png\" alt=\"\" class=\"wp-image-9531\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/head.png 790w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/head-300x139.png 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/head-768x355.png 768w\" sizes=\"auto, (max-width: 790px) 100vw, 790px\" \/><figcaption>Visualizaci\u00f3n del c\u00f3digo en la etiqueta Head.<\/figcaption><\/figure><\/div>\n\n\n\n<p>Solo debes copiar y pegar este c\u00f3digo dentro de la etiqueta head en el <strong>editor de c\u00f3digo<\/strong> de tu WordPress: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style>\n  .video-responsive {\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 56.25%;\n    padding-top: 30px;\n    position: relative;\n    }\n.video-responsive iframe, .video-responsive object, .video-responsive embed {\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    }\n&lt;\/style>\n<\/code><\/pre>\n\n\n\n<p>As\u00ed deber\u00e1 quedar tu <strong>c\u00f3digo HTML<\/strong> para que tu video sea visualizado de manera responsive en cualquier dispositivo. <\/p>\n\n\n\n<p>Recuerda insertar la direcci\u00f3n URL proporcionada por YouTube y sin las medidas en el c\u00f3digo como se\u00f1alamos anteriormente. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"624\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/html.png\" alt=\"\" class=\"wp-image-9532\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/html.png 902w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/html-300x208.png 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/html-768x531.png 768w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><figcaption>C\u00f3digo final de adaptaci\u00f3n responsive de ejemplo. <\/figcaption><\/figure><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html>\n&lt;head>\t\n\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\t&lt;title>Prueba de responsive&lt;\/title>\n\t&lt;style>\n\t\t.video-responsive {\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 56.25%;\n    padding-top: 30px;\n    position: relative;\n    }\n.video-responsive iframe, .video-responsive object, .video-responsive embed {\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    }\n\t&lt;\/style>\n&lt;\/head>\n&lt;body>\n&lt;div class=\"video-responsive\">\n&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/GvEEpSb_zas\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen>&lt;\/iframe>\n&lt;\/div>\n&lt;\/body>\n&lt;hmtl>\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusiones finales<\/h2>\n\n\n\n<p>Como hemos visto, <strong>incrustar y adaptar todos nuestros videos de YouTube<\/strong> es bastante sencillo. <\/p>\n\n\n\n<p>Este m\u00e9todo te\nahorrar\u00e1 muchos dolores de cabeza y, adem\u00e1s, les facilitar\u00e1 a tus visitantes\nuna mejor experiencia mientras navegan en tu sitio web y reproducen los videos\nde esta plataforma.<\/p>\n\n\n\n<p>Seguramente, las tasas de rebote bajar\u00e1n considerablemente cuando tus videos se reproduzcan f\u00e1cilmente en cualquier navegador o dispositivo, sin interferir en la estructura y el contenido de tu sitio web. <\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00bfYa tienes tu sitio web de marca personal o de empresa funcionando? <\/strong><\/p>\n\n\n\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link has-background has-vivid-green-cyan-background-color\" href=\"https:\/\/www.neolo.com\/es\/crea-tu-sitio-web\/\"><strong>M\u00c1S INFORMACI\u00d3N<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Uno de los elementos que m\u00e1s dificultan la buena experiencia del usuario es la visualizaci\u00f3n de un video en YouTube, es por ello que, en esta ocasi\u00f3n, te vamos a ense\u00f1ar c\u00f3mo incrustar un video de YouTube correctamente. \u00bfPor qu\u00e9 incrustar un video de YouTube en un sitio web? Adem\u00e1s de visualizar nuestros videos favoritos [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":9537,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[309],"tags":[],"class_list":["post-9524","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-recursos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo incrustar un video de YouTube - Neolo Blog<\/title>\n<meta name=\"description\" content=\"Descubre c\u00f3mo incrustar un video de YouTube en tu sitio web o blog con adaptaci\u00f3n a la pantalla de cualquier dispositivo m\u00f3vil.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo incrustar un video de YouTube - Neolo Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre c\u00f3mo incrustar un video de YouTube en tu sitio web o blog con adaptaci\u00f3n a la pantalla de cualquier dispositivo m\u00f3vil.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php\" \/>\n<meta property=\"og:site_name\" content=\"Neolo Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/neolohosting\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-04T15:13:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/C\u00f3mo-incrustar-un-video-de-YouTube.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Estefania Santana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@neolo\" \/>\n<meta name=\"twitter:site\" content=\"@neolo\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Estefania Santana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php\"},\"author\":{\"name\":\"Estefania Santana\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/74cc874e6c298318ef7dd292f42f88a4\"},\"headline\":\"C\u00f3mo incrustar un video de YouTube\",\"datePublished\":\"2020-08-04T15:13:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php\"},\"wordCount\":1494,\"publisher\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/C\u00f3mo-incrustar-un-video-de-YouTube.jpg\",\"articleSection\":[\"Recursos\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php\",\"url\":\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php\",\"name\":\"C\u00f3mo incrustar un video de YouTube - Neolo Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/C\u00f3mo-incrustar-un-video-de-YouTube.jpg\",\"datePublished\":\"2020-08-04T15:13:46+00:00\",\"description\":\"Descubre c\u00f3mo incrustar un video de YouTube en tu sitio web o blog con adaptaci\u00f3n a la pantalla de cualquier dispositivo m\u00f3vil.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#primaryimage\",\"url\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/C\u00f3mo-incrustar-un-video-de-YouTube.jpg\",\"contentUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/C\u00f3mo-incrustar-un-video-de-YouTube.jpg\",\"width\":750,\"height\":500,\"caption\":\"C\u00f3mo incrustar un video de YouTube\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/www.neolo.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recursos\",\"item\":\"https:\/\/www.neolo.com\/blog\/temas\/recursos\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo incrustar un video de YouTube\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#website\",\"url\":\"https:\/\/www.neolo.com\/blog\/\",\"name\":\"Neolo Blog\",\"description\":\"Blog de Neolo: Dominios, Web Hosting y Marketing Digital\",\"publisher\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.neolo.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#organization\",\"name\":\"Neolo\",\"url\":\"https:\/\/www.neolo.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png\",\"contentUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png\",\"width\":392,\"height\":83,\"caption\":\"Neolo\"},\"image\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/neolohosting\",\"https:\/\/x.com\/neolo\",\"https:\/\/www.instagram.com\/neolodotcom\/\",\"https:\/\/www.linkedin.com\/company\/neolo.com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/74cc874e6c298318ef7dd292f42f88a4\",\"name\":\"Estefania Santana\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1f03e9cbb04bf960fb5bd4a2613680ab?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1f03e9cbb04bf960fb5bd4a2613680ab?s=96&r=g\",\"caption\":\"Estefania Santana\"},\"url\":\"https:\/\/www.neolo.com\/blog\/author\/estefania\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo incrustar un video de YouTube - Neolo Blog","description":"Descubre c\u00f3mo incrustar un video de YouTube en tu sitio web o blog con adaptaci\u00f3n a la pantalla de cualquier dispositivo m\u00f3vil.","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:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php","og_type":"article","og_title":"C\u00f3mo incrustar un video de YouTube - Neolo Blog","og_description":"Descubre c\u00f3mo incrustar un video de YouTube en tu sitio web o blog con adaptaci\u00f3n a la pantalla de cualquier dispositivo m\u00f3vil.","og_url":"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php","og_site_name":"Neolo Blog","article_publisher":"https:\/\/www.facebook.com\/neolohosting","article_published_time":"2020-08-04T15:13:46+00:00","og_image":[{"width":750,"height":500,"url":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/C\u00f3mo-incrustar-un-video-de-YouTube.jpg","type":"image\/jpeg"}],"author":"Estefania Santana","twitter_card":"summary_large_image","twitter_creator":"@neolo","twitter_site":"@neolo","twitter_misc":{"Escrito por":"Estefania Santana","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#article","isPartOf":{"@id":"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php"},"author":{"name":"Estefania Santana","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/74cc874e6c298318ef7dd292f42f88a4"},"headline":"C\u00f3mo incrustar un video de YouTube","datePublished":"2020-08-04T15:13:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php"},"wordCount":1494,"publisher":{"@id":"https:\/\/www.neolo.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#primaryimage"},"thumbnailUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/C\u00f3mo-incrustar-un-video-de-YouTube.jpg","articleSection":["Recursos"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php","url":"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php","name":"C\u00f3mo incrustar un video de YouTube - Neolo Blog","isPartOf":{"@id":"https:\/\/www.neolo.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#primaryimage"},"image":{"@id":"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#primaryimage"},"thumbnailUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/C\u00f3mo-incrustar-un-video-de-YouTube.jpg","datePublished":"2020-08-04T15:13:46+00:00","description":"Descubre c\u00f3mo incrustar un video de YouTube en tu sitio web o blog con adaptaci\u00f3n a la pantalla de cualquier dispositivo m\u00f3vil.","breadcrumb":{"@id":"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#primaryimage","url":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/C\u00f3mo-incrustar-un-video-de-YouTube.jpg","contentUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/08\/C\u00f3mo-incrustar-un-video-de-YouTube.jpg","width":750,"height":500,"caption":"C\u00f3mo incrustar un video de YouTube"},{"@type":"BreadcrumbList","@id":"https:\/\/www.neolo.com\/blog\/como-incrustar-un-video-de-youtube.php#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/www.neolo.com\/blog"},{"@type":"ListItem","position":2,"name":"Recursos","item":"https:\/\/www.neolo.com\/blog\/temas\/recursos"},{"@type":"ListItem","position":3,"name":"C\u00f3mo incrustar un video de YouTube"}]},{"@type":"WebSite","@id":"https:\/\/www.neolo.com\/blog\/#website","url":"https:\/\/www.neolo.com\/blog\/","name":"Neolo Blog","description":"Blog de Neolo: Dominios, Web Hosting y Marketing Digital","publisher":{"@id":"https:\/\/www.neolo.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.neolo.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.neolo.com\/blog\/#organization","name":"Neolo","url":"https:\/\/www.neolo.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png","contentUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png","width":392,"height":83,"caption":"Neolo"},"image":{"@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/neolohosting","https:\/\/x.com\/neolo","https:\/\/www.instagram.com\/neolodotcom\/","https:\/\/www.linkedin.com\/company\/neolo.com\/"]},{"@type":"Person","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/74cc874e6c298318ef7dd292f42f88a4","name":"Estefania Santana","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1f03e9cbb04bf960fb5bd4a2613680ab?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1f03e9cbb04bf960fb5bd4a2613680ab?s=96&r=g","caption":"Estefania Santana"},"url":"https:\/\/www.neolo.com\/blog\/author\/estefania"}]}},"_links":{"self":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts\/9524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/comments?post=9524"}],"version-history":[{"count":20,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts\/9524\/revisions"}],"predecessor-version":[{"id":9557,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts\/9524\/revisions\/9557"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/media\/9537"}],"wp:attachment":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/media?parent=9524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/categories?post=9524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/tags?post=9524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}