{"id":10567,"date":"2016-07-11T10:23:16","date_gmt":"2016-07-11T08:23:16","guid":{"rendered":"https:\/\/internetrepublica.com\/?p=10567"},"modified":"2016-07-20T08:18:48","modified_gmt":"2016-07-20T08:18:48","slug":"como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web","status":"publish","type":"post","link":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/","title":{"rendered":"C\u00f3mo insertar v\u00eddeos de youtube sin perjudicar la carga de tu web"},"content":{"rendered":"<p style=\"text-align: justify;\">Como ya hemos visto en otras ocasiones, la <a href=\"https:\/\/internetrepublica.com\/guia-basica-de-wpo-para-acelerar-la-carga-de-tu-web\/\">velocidad de carga<\/a> es un factor determinante en SEO, que puede alejar tu sitio de las primeras posiciones de los buscadores. Sin embargo, la necesidad de reducir al m\u00ednimo el peso de la web y el n\u00famero de peticiones que se hacen al servidor, a menudo nos lleva a eliminar elementos que pueden enriquecer nuestros contenidos y entretener al usuario para que pase m\u00e1s tiempo en la p\u00e1gina: nos referimos a insertar v\u00eddeos de Youtube.<\/p>\n<p style=\"text-align: justify;\">Incrustar v\u00eddeos en una web es muy sencillo, existen infinidad en Youtube e incluso se pueden personalizar para adaptarlos al aspecto de nuestro sitio. Pero, si analizamos una p\u00e1gina con v\u00eddeos insertados, podemos ver que no todo son ventajas: los v\u00eddeos son lentos y pesados aunque no se sirvan desde nuestro propio servidor.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10569\" src=\"https:\/\/internetrepublica.com\/wp-content\/uploads\/2016\/07\/peticiones_al_insertar_videos_de_youtube.jpg\" alt=\"peticiones al insertar v\u00eddeos de youtube\" width=\"700\" height=\"325\" \/><\/p>\n<p>Insertar v\u00eddeos de Youtube no solo eleva el n\u00famero de peticiones al servidor considerablemente, sino que tambi\u00e9n aumenta el peso total de la p\u00e1gina en m\u00e1s de 500 Kb, algo que perjudica seriamente la velocidad de carga de la web. Afortunadamente, existe una soluci\u00f3n que puede reducir todas estas peticiones a una por v\u00eddeo, rebajando el peso hasta unos 50 Kb. En esta entrada mostramos c\u00f3mo hacerlo.<\/p>\n<h2>Cargar los archivos del reproductor al pulsar en el v\u00eddeo<\/h2>\n<p>Cada v\u00eddeo de Youtube trae consigo una serie de im\u00e1genes previas que podemos traer a nuestro sitio con Javascript. La idea es sustituir el iframe original, donde se encuentra el reproductor completo, por la imagen previa del v\u00eddeo, a la que vamos a superponer un bot\u00f3n simulando el play de Youtube.<\/p>\n<p>Cuando el usuario pulse en el play, la imagen ser\u00e1 sustituida inmediatamente por el reproductor de Youtube, por lo que los recursos s\u00f3lo ser\u00e1n cargados cuando el usuario decida visualizar el v\u00eddeo y no al cargar la p\u00e1gina.<\/p>\n<p>Como se puede ver a continuaci\u00f3n el efecto es pr\u00e1cticamente imperceptible para el usuario:<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"LkjERp\" data-default-tab=\"js,result\" data-user=\"abaraza\" data-embed-version=\"2\">See the Pen <a href=\"https:\/\/codepen.io\/abaraza\/pen\/LkjERp\/\">LkjERp<\/a> by Agustin (<a href=\"http:\/\/codepen.io\/abaraza\">@abaraza<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\" async=\"\"><\/script><\/p>\n<h2>C\u00f3mo insertar\u00a0v\u00eddeos de Youtube en tu site con esta t\u00e9cnica<\/h2>\n<p>El c\u00f3digo se compone de 3 partes que debemos a\u00f1adir a la p\u00e1gina donde se vayan a reproducir los v\u00eddeos.<\/p>\n<h3>HTML<\/h3>\n<p>En primer lugar es necesario situar este HTML en la parte de la p\u00e1gina donde se vaya a mostrar el v\u00eddeo, incluyendo en el atributo \u201cdata-id\u201d el ID \u00fanico del v\u00eddeo de Youtube que se desee visualizar.<\/p>\n<pre><span style=\"font-weight: 400;\">&lt;div class=\"contenedor\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;div class=\"reproductor\" data-id=\"<\/span><span style=\"font-weight: 400; color: #ff0000;\">QMgSELBA7kw<\/span><span style=\"font-weight: 400;\">\"&gt;&lt;\/div&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<p>El ID \u00fanico se obtiene de la propia URL que muestra Youtube al reproducir el v\u00eddeo en cuesti\u00f3n:<\/p>\n<p><code>https:\/\/www.youtube.com\/watch?v=<span style=\"color: #ff0000;\">QMgSELBA7kw<\/span><\/code><\/p>\n<p>Para insertar m\u00e1s de un v\u00eddeo tan solo debemos copiar este HTML varias veces cambiando el ID por el que corresponda a cada\u00a0uno de los v\u00eddeos.<\/p>\n<h3>CSS<\/h3>\n<p>Para dar formato al conjunto y hacer que el v\u00eddeo se adapte a la ventana del navegador debemos a\u00f1adir los siguientes estilos a nuestro archivo CSS o directamente a la p\u00e1gina usando las etiquetas &lt;style&gt;&lt;\/style&gt;:<\/p>\n<pre><span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">.contenedor{<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0display: block; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0margin: 20px auto; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 100%; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0max-width: 600px; \u00a0<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">.reproductor { <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0display: block; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 100%; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 100%; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0padding-bottom: 56.25%; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0overflow: hidden; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0position: relative; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0cursor: hand; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0cursor: pointer; <\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">img.imagen-previa { <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0display: block; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0left: 0; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0bottom: 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0margin: auto; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0max-width: 100%; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0width: 100%; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0position: absolute; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0right: 0; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0top: 0; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0height: auto <\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">div.youtube-play { <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0height: 64px; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0width: 64px; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0left: 50%; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0top: 50%; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0margin-left: -36px; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0margin-top: -36px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0opacity:0.7;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0position: absolute; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0background: \u00a0\u00a0url(\"https:\/\/cdn2.iconfinder.com\/data\/icons\/social-icons-color\/512\/youtube-64.png\") no-repeat; <\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">div.youtube-play:hover{<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0opacity:1; <\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">#youtube-iframe { <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0width: 100%; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0height: 100%; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0position: absolute; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0top: 0; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0left: 0; <\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p>&nbsp;<\/p>\n<h3>Javascript<\/h3>\n<p>Finalmente, para hacer que todo este invento funcione, necesitamos a\u00f1adir el siguiente Javascript a la p\u00e1gina donde se vayan a mostrar los v\u00eddeos, ya sea directamente poni\u00e9ndolo entre las etiquetas &lt;script&gt;&lt;\/script&gt;\u00a0o a\u00f1adi\u00e9ndolo a un archivo JS que posteriormente llamaremos desde la p\u00e1gina.<\/p>\n<pre><span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n<span style=\"font-weight: 400;\">(function() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0var v = document.getElementsByClassName(\"reproductor\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0for (var n = 0; n &lt; v.length; n++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var p = document.createElement(\"div\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0p.innerHTML = labnolThumb(v[n].dataset.id);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0p.onclick = labnolIframe;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0v[n].appendChild(p);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">})();<\/span>\r\n<span style=\"font-weight: 400;\">function labnolThumb(id) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return '&lt;img class=\"imagen-previa\" src=\"\/\/i.ytimg.com\/vi\/' + id + '\/hqdefault.jpg\"&gt;&lt;div class=\"youtube-play\"&gt;&lt;\/div&gt;';<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">function labnolIframe() {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0var iframe = document.createElement(\"iframe\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0iframe.setAttribute(\"src\", \"\/\/www.youtube.com\/embed\/\" + this.parentNode.dataset.id + \"?autoplay=1&amp;autohide=2&amp;border=0&amp;wmode=opaque&amp;enablejsapi=1&amp;controls=0&amp;showinfo=0\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0iframe.setAttribute(\"frameborder\", \"0\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0iframe.setAttribute(\"id\", \"youtube-iframe\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0this.parentNode.replaceChild(iframe, this);<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Como ya hemos visto en otras ocasiones, la velocidad de carga es un factor determinante en SEO, que puede alejar tu sitio de las primeras posiciones de los buscadores. <\/p>\n","protected":false},"author":28,"featured_media":59613,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[119],"tags":[267,618],"class_list":["post-10567","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-destacado","tag-wpo"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo insertar v\u00eddeos de youtube sin perjudicar la carga de tu web - Internet Rep\u00fablica<\/title>\n<meta name=\"description\" content=\"Como ya hemos visto en otras ocasiones, la velocidad de carga es un factor determinante en SEO, que puede alejar tu sitio de las primeras posiciones de los buscadores.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo insertar v\u00eddeos de youtube sin perjudicar la carga de tu web - Internet Rep\u00fablica\" \/>\n<meta property=\"og:description\" content=\"Como ya hemos visto en otras ocasiones, la velocidad de carga es un factor determinante en SEO, que puede alejar tu sitio de las primeras posiciones de los buscadores.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Internet Rep\u00fablica\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-11T08:23:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-07-20T08:18:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/internetrepublica.com\/blog\/wp-content\/uploads\/2016\/07\/seo_youtube.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"485\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Agust\u00edn\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agust\u00edn\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/\"},\"author\":{\"name\":\"Agust\u00edn\",\"@id\":\"https:\/\/internetrepublica.com\/blog\/#\/schema\/person\/eb8c9e60be159c5cb6c5ae3a02875f44\"},\"headline\":\"C\u00f3mo insertar v\u00eddeos de youtube sin perjudicar la carga de tu web\",\"datePublished\":\"2016-07-11T08:23:16+00:00\",\"dateModified\":\"2016-07-20T08:18:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/\"},\"wordCount\":594,\"commentCount\":1,\"image\":{\"@id\":\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/internetrepublica.com\/blog\/wp-content\/uploads\/2016\/07\/seo_youtube.jpg\",\"keywords\":[\"destacado\",\"WPO\"],\"articleSection\":[\"SEO\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/\",\"url\":\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/\",\"name\":\"C\u00f3mo insertar v\u00eddeos de youtube sin perjudicar la carga de tu web - Internet Rep\u00fablica\",\"isPartOf\":{\"@id\":\"https:\/\/internetrepublica.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/internetrepublica.com\/blog\/wp-content\/uploads\/2016\/07\/seo_youtube.jpg\",\"datePublished\":\"2016-07-11T08:23:16+00:00\",\"dateModified\":\"2016-07-20T08:18:48+00:00\",\"author\":{\"@id\":\"https:\/\/internetrepublica.com\/blog\/#\/schema\/person\/eb8c9e60be159c5cb6c5ae3a02875f44\"},\"description\":\"Como ya hemos visto en otras ocasiones, la velocidad de carga es un factor determinante en SEO, que puede alejar tu sitio de las primeras posiciones de los buscadores.\",\"breadcrumb\":{\"@id\":\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#primaryimage\",\"url\":\"https:\/\/internetrepublica.com\/blog\/wp-content\/uploads\/2016\/07\/seo_youtube.jpg\",\"contentUrl\":\"https:\/\/internetrepublica.com\/blog\/wp-content\/uploads\/2016\/07\/seo_youtube.jpg\",\"width\":750,\"height\":485,\"caption\":\"seo youtube\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Agencia Marketing Digital\",\"item\":\"https:\/\/internetrepublica.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SEO\",\"item\":\"https:\/\/internetrepublica.com\/blog\/seo\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo insertar v\u00eddeos de youtube sin perjudicar la carga de tu web\",\"item\":\"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/internetrepublica.com\/blog\/#website\",\"url\":\"https:\/\/internetrepublica.com\/blog\/\",\"name\":\"Internet Rep\u00fablica\",\"description\":\"Agencia SEO y Marketing Digital\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/internetrepublica.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/internetrepublica.com\/blog\/#\/schema\/person\/eb8c9e60be159c5cb6c5ae3a02875f44\",\"name\":\"Agust\u00edn\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/ce6867b8295e3ecf8dbf721dd7d226e3d91ea1cb2c5619443bf09767011091ba?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ce6867b8295e3ecf8dbf721dd7d226e3d91ea1cb2c5619443bf09767011091ba?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ce6867b8295e3ecf8dbf721dd7d226e3d91ea1cb2c5619443bf09767011091ba?s=96&d=mm&r=g\",\"caption\":\"Agust\u00edn\"},\"description\":\"Inform\u00e1tico y creador de blogs compulsivo (a veces hasta me acuerdo de dormir). Actualmente me dedico a esto del SEO.\",\"url\":\"https:\/\/internetrepublica.com\/blog\/author\/agustin-ruiz\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo insertar v\u00eddeos de youtube sin perjudicar la carga de tu web - Internet Rep\u00fablica","description":"Como ya hemos visto en otras ocasiones, la velocidad de carga es un factor determinante en SEO, que puede alejar tu sitio de las primeras posiciones de los buscadores.","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:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo insertar v\u00eddeos de youtube sin perjudicar la carga de tu web - Internet Rep\u00fablica","og_description":"Como ya hemos visto en otras ocasiones, la velocidad de carga es un factor determinante en SEO, que puede alejar tu sitio de las primeras posiciones de los buscadores.","og_url":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/","og_site_name":"Internet Rep\u00fablica","article_published_time":"2016-07-11T08:23:16+00:00","article_modified_time":"2016-07-20T08:18:48+00:00","og_image":[{"width":750,"height":485,"url":"https:\/\/internetrepublica.com\/blog\/wp-content\/uploads\/2016\/07\/seo_youtube.jpg","type":"image\/jpeg"}],"author":"Agust\u00edn","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Agust\u00edn","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#article","isPartOf":{"@id":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/"},"author":{"name":"Agust\u00edn","@id":"https:\/\/internetrepublica.com\/blog\/#\/schema\/person\/eb8c9e60be159c5cb6c5ae3a02875f44"},"headline":"C\u00f3mo insertar v\u00eddeos de youtube sin perjudicar la carga de tu web","datePublished":"2016-07-11T08:23:16+00:00","dateModified":"2016-07-20T08:18:48+00:00","mainEntityOfPage":{"@id":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/"},"wordCount":594,"commentCount":1,"image":{"@id":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#primaryimage"},"thumbnailUrl":"https:\/\/internetrepublica.com\/blog\/wp-content\/uploads\/2016\/07\/seo_youtube.jpg","keywords":["destacado","WPO"],"articleSection":["SEO"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/","url":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/","name":"C\u00f3mo insertar v\u00eddeos de youtube sin perjudicar la carga de tu web - Internet Rep\u00fablica","isPartOf":{"@id":"https:\/\/internetrepublica.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#primaryimage"},"image":{"@id":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#primaryimage"},"thumbnailUrl":"https:\/\/internetrepublica.com\/blog\/wp-content\/uploads\/2016\/07\/seo_youtube.jpg","datePublished":"2016-07-11T08:23:16+00:00","dateModified":"2016-07-20T08:18:48+00:00","author":{"@id":"https:\/\/internetrepublica.com\/blog\/#\/schema\/person\/eb8c9e60be159c5cb6c5ae3a02875f44"},"description":"Como ya hemos visto en otras ocasiones, la velocidad de carga es un factor determinante en SEO, que puede alejar tu sitio de las primeras posiciones de los buscadores.","breadcrumb":{"@id":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#primaryimage","url":"https:\/\/internetrepublica.com\/blog\/wp-content\/uploads\/2016\/07\/seo_youtube.jpg","contentUrl":"https:\/\/internetrepublica.com\/blog\/wp-content\/uploads\/2016\/07\/seo_youtube.jpg","width":750,"height":485,"caption":"seo youtube"},{"@type":"BreadcrumbList","@id":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Agencia Marketing Digital","item":"https:\/\/internetrepublica.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SEO","item":"https:\/\/internetrepublica.com\/blog\/seo\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo insertar v\u00eddeos de youtube sin perjudicar la carga de tu web","item":"https:\/\/internetrepublica.com\/blog\/como-insertar-videos-de-youtube-sin-perjudicar-la-carga-de-tu-web\/"}]},{"@type":"WebSite","@id":"https:\/\/internetrepublica.com\/blog\/#website","url":"https:\/\/internetrepublica.com\/blog\/","name":"Internet Rep\u00fablica","description":"Agencia SEO y Marketing Digital","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/internetrepublica.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/internetrepublica.com\/blog\/#\/schema\/person\/eb8c9e60be159c5cb6c5ae3a02875f44","name":"Agust\u00edn","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/ce6867b8295e3ecf8dbf721dd7d226e3d91ea1cb2c5619443bf09767011091ba?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ce6867b8295e3ecf8dbf721dd7d226e3d91ea1cb2c5619443bf09767011091ba?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ce6867b8295e3ecf8dbf721dd7d226e3d91ea1cb2c5619443bf09767011091ba?s=96&d=mm&r=g","caption":"Agust\u00edn"},"description":"Inform\u00e1tico y creador de blogs compulsivo (a veces hasta me acuerdo de dormir). Actualmente me dedico a esto del SEO.","url":"https:\/\/internetrepublica.com\/blog\/author\/agustin-ruiz\/"}]}},"_links":{"self":[{"href":"https:\/\/internetrepublica.com\/blog\/wp-json\/wp\/v2\/posts\/10567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/internetrepublica.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/internetrepublica.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/internetrepublica.com\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/internetrepublica.com\/blog\/wp-json\/wp\/v2\/comments?post=10567"}],"version-history":[{"count":2,"href":"https:\/\/internetrepublica.com\/blog\/wp-json\/wp\/v2\/posts\/10567\/revisions"}],"predecessor-version":[{"id":59614,"href":"https:\/\/internetrepublica.com\/blog\/wp-json\/wp\/v2\/posts\/10567\/revisions\/59614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/internetrepublica.com\/blog\/wp-json\/wp\/v2\/media\/59613"}],"wp:attachment":[{"href":"https:\/\/internetrepublica.com\/blog\/wp-json\/wp\/v2\/media?parent=10567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/internetrepublica.com\/blog\/wp-json\/wp\/v2\/categories?post=10567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/internetrepublica.com\/blog\/wp-json\/wp\/v2\/tags?post=10567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}