{"id":4013,"date":"2018-12-13T22:43:39","date_gmt":"2018-12-13T20:43:39","guid":{"rendered":"http:\/\/sasogu.es\/blog\/?p=4013"},"modified":"2018-12-13T22:43:39","modified_gmt":"2018-12-13T20:43:39","slug":"insertar-video-de-youtube-en-wordpress-sin-que-retarde-la-carga-de-la-pagina","status":"publish","type":"post","link":"https:\/\/edutictac.es\/blog\/sasogu\/insertar-video-de-youtube-en-wordpress-sin-que-retarde-la-carga-de-la-pagina\/","title":{"rendered":"Insertar video de youtube en WordPress sin que retarde la carga de la p\u00e1gina…"},"content":{"rendered":"

Llevo unos meses aprendiendo mucho de WordPress Multisite + Genesis desarrollango la p\u00e1gina de la Comunidad Budista Soto Zen<\/a>, el resultado me gusta pero la p\u00e1gina principal tardaba mucho en cargar… buscando por internet he encontrado este m\u00e9todo que hace que cargue infinitamente m\u00e1s r\u00e1pida \ud83d\ude42<\/p>\n

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

HTML<\/strong><\/p>\n

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

\n
\n
<div class=\"contenedor\">\n \u00a0<div class=\"reproductor\" data-id=\"QMgSELBA7kw\"><\/div>\n<\/div><\/pre>\n<\/div>\n<\/div>\n
El ID \u00fanico se obtiene de la propia URL que muestra Youtube al reproducir el v\u00eddeo en cuesti\u00f3n:<\/p>\n
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 uno de los v\u00eddeos.<\/p>\n
CSS<\/strong><\/p>\n
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<\/p>\n
<style>\n.contenedor{\n \u00a0display: block; \n \u00a0margin: 20px auto; \n \u00a0width: 100%; \n \u00a0max-width: 600px; \u00a0\n}\n.reproductor { \n \u00a0display: block; \n \u00a0width: 100%; \n \u00a0height: 100%; \n \u00a0padding-bottom: 56.25%; \n \u00a0overflow: hidden; \n \u00a0position: relative; \n \u00a0cursor: hand; \n \u00a0cursor: pointer; \n}\nimg.imagen-previa { \n \u00a0\u00a0display: block; \n \u00a0\u00a0left: 0; \n \u00a0\u00a0bottom: 0;\n \u00a0\u00a0margin: auto; \n \u00a0\u00a0max-width: 100%; \n \u00a0\u00a0width: 100%; \n \u00a0\u00a0position: absolute; \n \u00a0\u00a0right: 0; \n \u00a0\u00a0top: 0; \n \u00a0\u00a0height: auto \n}\ndiv.youtube-play { \n \u00a0\u00a0height: 64px; \n \u00a0\u00a0width: 64px; \n \u00a0\u00a0left: 50%; \n \u00a0\u00a0top: 50%; \n \u00a0\u00a0margin-left: -36px; \n \u00a0\u00a0margin-top: -36px;\n \u00a0\u00a0opacity:0.7;\n \u00a0\u00a0position: absolute; \n \u00a0\u00a0background: \u00a0\u00a0url(\"https:\/\/cdn2.iconfinder.com\/data\/icons\/social-icons-color\/512\/youtube-64.png\") no-repeat; \n}\ndiv.youtube-play:hover{\n \u00a0\u00a0opacity:1; \n}\n#youtube-iframe { \n \u00a0\u00a0width: 100%; \n \u00a0\u00a0height: 100%; \n \u00a0\u00a0position: absolute; \n \u00a0\u00a0top: 0; \n \u00a0\u00a0left: 0; \n}\n<\/style><\/pre>\n
Javascript<\/strong><\/p>\n
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  o a\u00f1adi\u00e9ndolo a un archivo JS que posteriormente llamaremos desde la p\u00e1gina.<\/p>\n
<script>\n(function() {\n \u00a0\u00a0\u00a0var v = document.getElementsByClassName(\"reproductor\");\n \u00a0\u00a0\u00a0for (var n = 0; n < v.length; n++) {\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var p = document.createElement(\"div\");\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0p.innerHTML = labnolThumb(v[n].dataset.id);\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0p.onclick = labnolIframe;\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0v[n].appendChild(p);\n \u00a0\u00a0\u00a0}\n})();\nfunction labnolThumb(id) {\n \u00a0\u00a0\u00a0return '<img class=\"imagen-previa\" src=\"\/\/i.ytimg.com\/vi\/' + id + '\/hqdefault.jpg\"><div class=\"youtube-play\"><\/div>';\n}\nfunction labnolIframe() {\n \u00a0\u00a0\u00a0var iframe = document.createElement(\"iframe\");\n \u00a0\u00a0\u00a0iframe.setAttribute(\"src\", \"\/\/www.youtube.com\/embed\/\" + this.parentNode.dataset.id + \"?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0\");\n \u00a0\u00a0\u00a0iframe.setAttribute(\"frameborder\", \"0\");\n \u00a0\u00a0\u00a0iframe.setAttribute(\"id\", \"youtube-iframe\");\n \u00a0\u00a0\u00a0this.parentNode.replaceChild(iframe, this);\n}\n<\/script><\/pre>\n","protected":false},"excerpt":{"rendered":"
Llevo unos meses aprendiendo mucho de WordPress Multisite + Genesis desarrollango la p\u00e1gina de la Comunidad Budista Soto Zen, el resultado me gusta pero la p\u00e1gina principal tardaba mucho en cargar… buscando por internet he encontrado este m\u00e9todo que hace que cargue infinitamente m\u00e1s r\u00e1pida \ud83d\ude42 El c\u00f3digo se compone de 3 partes que debemos … Llegiu m\u00e9s<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[5],"tags":[53],"class_list":["post-4013","post","type-post","status-publish","format-standard","hentry","category-tic","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/posts\/4013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/comments?post=4013"}],"version-history":[{"count":0,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/posts\/4013\/revisions"}],"wp:attachment":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/media?parent=4013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/categories?post=4013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/tags?post=4013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}