{"id":794,"date":"2021-06-17T23:16:26","date_gmt":"2021-06-18T04:16:26","guid":{"rendered":"http:\/\/gumonet.com\/?p=794"},"modified":"2021-06-18T11:15:35","modified_gmt":"2021-06-18T16:15:35","slug":"incrustar-videos-de-youtube-responsivos","status":"publish","type":"post","link":"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/","title":{"rendered":"Incrustar videos de YouTube responsivos"},"content":{"rendered":"\n<p>Colocar un video de <a href=\"https:\/\/www.youtube.com\/\">YouTube<\/a> en nuestro sitio web o landing page es una tarea sencilla al utilizar el c\u00f3digo embed que nos brinda la plataforma para insertar estos v\u00eddeos en donde nosotros querramos, pero este c\u00f3digo trae un ancho y alto definido lo cual muchas veces es un dolor de cabeza al tratar de adaptar estos v\u00eddeos a resoluciones mobiles. Pero no te preocupes aqu\u00ed te ense\u00f1amos como I<strong>ncrustar videos de YouTube responsivos<\/strong> f\u00e1cil y r\u00e1pido utilizando JavaScript y un poco de CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Obteniendo el c\u00f3digo de incorporaci\u00f3n de YouTube<\/h2>\n\n\n\n<p>Los pasos para obtener el c\u00f3digo de incorporaci\u00f3n de YouTube son sencillos:<\/p>\n\n\n\n<ol><li>Ubicamos la pesta\u00f1a compartir.<\/li><\/ol>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Paso-1-incrustar-video-youtube-1024x572.jpg\" alt=\"Incrustar video de youtube paso 1\" class=\"wp-image-803\" width=\"579\" height=\"323\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Paso-1-incrustar-video-youtube-1024x572.jpg 1024w, https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Paso-1-incrustar-video-youtube-300x168.jpg 300w, https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Paso-1-incrustar-video-youtube-768x429.jpg 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Paso-1-incrustar-video-youtube.jpg 1328w\" sizes=\"(max-width: 579px) 100vw, 579px\" \/><\/figure><\/div>\n\n\n\n<p>2. Seleccionamos la opci\u00f3n incorporar.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"531\" height=\"347\" src=\"http:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Paso-2-incrustar-video-youtube.jpg\" alt=\"Incrustar video de youtube paso 2\" class=\"wp-image-801\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Paso-2-incrustar-video-youtube.jpg 531w, https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Paso-2-incrustar-video-youtube-300x196.jpg 300w\" sizes=\"(max-width: 531px) 100vw, 531px\" \/><\/figure><\/div>\n\n\n\n<p>3. Copiamos el c\u00f3digo que nos muestra del lado derecho.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Paso-3-incrustar-video-youtube-1024x404.jpg\" alt=\"Incrustar video de youtube paso 3\" class=\"wp-image-802\" width=\"666\" height=\"262\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Paso-3-incrustar-video-youtube-1024x404.jpg 1024w, https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Paso-3-incrustar-video-youtube-300x118.jpg 300w, https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Paso-3-incrustar-video-youtube-768x303.jpg 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Paso-3-incrustar-video-youtube.jpg 1306w\" sizes=\"(max-width: 666px) 100vw, 666px\" \/><figcaption>Incrustar video de youtube paso 3<\/figcaption><\/figure>\n\n\n\n<pre title=\"Codigo de inserci\u00f3n de YouTube\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;iframe width=\"560\" height=\"315\" src=\"&lt;https:\/\/www.youtube.com\/embed\/6WmbTTeIQNg&gt;\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen&gt;&lt;\/iframe&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Insertando el c\u00f3digo copiado en nuestro sitio<\/h2>\n\n\n\n<p>Para este ejemplo vamos a crear una peque\u00f1a estructura html con algo de estilo para poder insertar nuestro v\u00eddeo.<\/p>\n\n\n\n<pre title=\"index.html\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;!doctype html&gt;\n&lt;html lang=\"es\"&gt;\n&lt;head&gt;\n\t&lt;meta charset=\"UTF-8\"&gt;\n\t&lt;meta name=\"viewport\"\n\t\t  content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\"&gt;\n\t&lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;\n\t&lt;title&gt;Youtube Embed responsive&lt;\/title&gt;\n\t&lt;style&gt;\n\t\t\t.container{\n\t\t\t    max-width: 900px;\n\t\t\t    margin: 0 auto;\n\t\t\t    display: flex;\n\t\t\t    background: beige;\n\t\t\t    padding: 1rem;\n\t\t\t    flex-direction: column;\n\t\t\t}\n\t\t\t.youtube-container{\n\t\t\t    width: 100%;\n\t\t\t}\n&lt;\/style&gt;\n\t&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;div class=\"container\"&gt;\n\t\t&lt;div class=\"title\"&gt;\n\t\t\t&lt;h1&gt;Youtube video responsive embed&lt;\/h1&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;div class=\"text\"&gt;\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci alias beatae consequuntur, ea eos expedita explicabo fuga iure laboriosam laudantium molestiae neque obcaecati perferendis quam qui reiciendis sit unde!&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;div class=\"youtube-container\"&gt;\n\n&lt;!-- Youtube embed code --&gt;\n\t\t\t&lt;iframe width=\"560\" height=\"315\" src=\"&lt;https:\/\/www.youtube.com\/embed\/6WmbTTeIQNg&gt;\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen&gt;&lt;\/iframe&gt;\n\t\t\t&lt;!-- .\/Youtube embed code --&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\t\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Hasta aqu\u00ed no hay nada nuevo, tenemos una p\u00e1gina html con un v\u00eddeo de YouTube incorporado que se ver\u00eda de la siguiente manera:<\/p>\n\n\n\n<div class=\"wp-block-image w-100\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"556\" src=\"http:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos-ejemplo-1024x556.jpg\" alt=\"Incrustar videos de YouTube responsivos ejemplo\" class=\"wp-image-800\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos-ejemplo-1024x556.jpg 1024w, https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos-ejemplo-300x163.jpg 300w, https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos-ejemplo-768x417.jpg 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos-ejemplo-1536x835.jpg 1536w, https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos-ejemplo.jpg 1888w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>El problema se presenta cuando intentamos visualizar este v\u00eddeo en resoluciones menores de 560px<\/p>\n\n\n\n<div style=\"width:100%;height:0;padding-bottom:55%;position:relative;\"><iframe loading=\"lazy\" src=\"https:\/\/giphy.com\/embed\/5cwBvYhQsH01Aj046F\" width=\"100%\" height=\"100%\" style=\"position:absolute\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen><\/iframe><\/div><p><a href=\"https:\/\/giphy.com\/gifs\/5cwBvYhQsH01Aj046F\">via GIPHY<\/a><\/p>\n\n\n\n<p>Debido a que el c\u00f3digo proporcionado por YouTube contiene un ancho y alto definido <code>width=\"560\" height=\"315\"<\/code> <strong>nuestro elemento iframe no es responsivo.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Haciendo nuestro v\u00eddeo responsivo<\/h2>\n\n\n\n<p>Gracias a la magia de JavaScript podemos convertir nuestros iframes de YouTube en elementos que se adapten al ancho de la pantalla.<\/p>\n\n\n\n<p>Insertamos el siguiente c\u00f3digo antes de la etiqueta <code>&lt;\/body&gt;<\/code> de nuestra p\u00e1gina.<\/p>\n\n\n\n<pre title=\"\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">const $GMN_ObjYoutube = {\n\tiframes : [], \/\/Define un array llamado iframes\n\tinit: () =&gt; {\n\t\t$GMN_ObjYoutube.frames = $GMN_ObjYoutube.getAllYoutubeIframes(); \/\/Obtenemos los iframes\n\t\t$GMN_ObjYoutube.processIframes(); \/\/Procesamos cada uno de los iframes\n\t\twindow.addEventListener('resize', $GMN_ObjYoutube.processIframes); \/\/Agregamos un listener que se ejecutar\u00e1 cada vez que nuestra pantalla cambie de resoluci\u00f3n\n\t},\n\tprocessIframes: () =&gt; { \/\/Funci\u00f3n que procesa los iframes\n\t\tfor( let i = 0; i &lt; $GMN_ObjYoutube.frames.length; i++  ) {\n\t\t\tlet iframe = $GMN_ObjYoutube.frames[ i ];\n\t\t\t$GMN_ObjYoutube.resizeIframe( iframe );\n\t\t}\n\t},\n\tgetAllYoutubeIframes: () =&gt; {\n\t\treturn document.getElementsByClassName('responsive-youtube');\/\/Obtiene todos los elementos con la clase responsive-youtube\n\t},\n\tresizeIframe: ( iframe ) =&gt; { \/\/procesamos los iframes y ajustamos a ancho y alto\n\t\tlet parent = iframe.parentElement; \n\t\tiframe.height = ( iframe.height \/ iframe.width ) * parent.clientWidth;\n\t\tiframe.width = parent.clientWidth;\n\t}\n}\n\n$GMN_ObjYoutube.init();\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Este c\u00f3digo nos ayudar\u00e1 a obtener todos los iframes de youtube que contengan la clase <code>responsive-youtube<\/code> y los ajustar\u00e1 cada que la resoluci\u00f3n de la pantalla cambie. Ahora solo agregamos la clase <code>responsive-youtube<\/code> a los iframes de youtube que deseemos convertir en responsivos. Nuestro archivo <code>index.html<\/code> quedar\u00eda de la siguiente manera:<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<pre title=\"index.html\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;!doctype html&gt;\n&lt;html lang=\"es\"&gt;\n&lt;head&gt;\n\t&lt;meta charset=\"UTF-8\"&gt;\n\t&lt;meta name=\"viewport\"\n\t\t  content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\"&gt;\n\t&lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;\n\t&lt;title&gt;Youtube Embed responsive&lt;\/title&gt;\n\t&lt;style&gt;\n\t\t\t.container{\n\t\t\t    max-width: 900px;\n\t\t\t    margin: 0 auto;\n\t\t\t    display: flex;\n\t\t\t    background: beige;\n\t\t\t    padding: 1rem;\n\t\t\t    flex-direction: column;\n\t\t\t}\n\t\t\t.youtube-container{\n\t\t\t    width: 100%;\n\t\t\t}\n&lt;\/style&gt;\n\t&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;div class=\"container\"&gt;\n\t\t&lt;div class=\"title\"&gt;\n\t\t\t&lt;h1&gt;Youtube video responsive embed&lt;\/h1&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;div class=\"text\"&gt;\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci alias beatae consequuntur, ea eos expedita explicabo fuga iure laboriosam laudantium molestiae neque obcaecati perferendis quam qui reiciendis sit unde!&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;div class=\"youtube-container\"&gt;\n\n&lt;!-- Youtube embed code --&gt;\n\t\t\t&lt;iframe width=\"560\" height=\"315\" src=\"&lt;https:\/\/www.youtube.com\/embed\/6WmbTTeIQNg&gt;\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen&gt;&lt;\/iframe&gt;\n\t\t\t&lt;!-- .\/Youtube embed code --&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\t\n&lt;javascript&gt;\nconst $GMN_ObjYoutube = {\n\tiframes : [], \/\/Define un array llamado iframes\n\tinit: () =&gt; {\n\t\t$GMN_ObjYoutube.frames = $GMN_ObjYoutube.getAllYoutubeIframes(); \/\/Obtenemos los iframes\n\t\t$GMN_ObjYoutube.processIframes(); \/\/Procesamos cada uno de los iframes\n\t\twindow.addEventListener('resize', $GMN_ObjYoutube.processIframes); \/\/Agregamos un listener que se ejecutar\u00e1 cada vez que nuestra pantalla cambie de resoluci\u00f3n\n\t},\n\tprocessIframes: () =&gt; { \/\/Funci\u00f3n que procesa los iframes\n\t\tfor( let i = 0; i &lt; $GMN_ObjYoutube.frames.length; i++  ) {\n\t\t\tlet iframe = $GMN_ObjYoutube.frames[ i ];\n\t\t\t$GMN_ObjYoutube.resizeIframe( iframe );\n\t\t}\n\t},\n\tgetAllYoutubeIframes: () =&gt; {\n\t\treturn document.getElementsByClassName('responsive-youtube');\/\/Obtiene todos los elementos con la clase responsive-youtube\n\t},\n\tresizeIframe: ( iframe ) =&gt; { \/\/procesamos los iframes y ajustamos a ancho y alto\n\t\tlet parent = iframe.parentElement; \n\t\tiframe.height = ( iframe.height \/ iframe.width ) * parent.clientWidth;\n\t\tiframe.width = parent.clientWidth;\n\t}\n}\n\n$GMN_ObjYoutube.init();\n&lt;\/javascript&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Resultado final<\/h2>\n\n\n\n<div style=\"width:100%;height:0;padding-bottom:55%;position:relative;\"><iframe loading=\"lazy\" src=\"https:\/\/giphy.com\/embed\/hvfNhUEd9OCZblIdmj\" width=\"100%\" height=\"100%\" style=\"position:absolute\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen><\/iframe><\/div><p><a href=\"https:\/\/giphy.com\/gifs\/hvfNhUEd9OCZblIdmj\">via GIPHY<\/a><\/p>\n\n\n\n<p>Y de esta manera podemos convertir f\u00e1cilmente cualquier video de youtube insertado mediante iframe en un elemento responsivo. Aqu\u00ed te dejamos un repositorio con los recursos separados para que puedas agregarlo a tu proyecto f\u00e1cilmente:<\/p>\n\n\n\n<p>GitHub: <a href=\"https:\/\/github.com\/gumonet\/youtube-responsive-embed\">https:\/\/github.com\/gumonet\/youtube-responsive-embed<\/a><br>CodePen: <a href=\"https:\/\/codepen.io\/gumonet\/pen\/xxqBEzR\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/gumonet\/pen\/xxqBEzR<\/a><\/p>\n\n\n\n<p>Existen muchas maneras de realizar este proceso, si t\u00fa conoces alguna mejor, quieres dar tu punto de vista o tienes alguna duda en especial, te espero en la caja de comentarios. Y no te olvides de visitar el resto de nuestras <a href=\"http:\/\/gumonet.com\/blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">publicaciones.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Colocar un video de YouTube en nuestro sitio web o landing page es una tarea sencilla al utilizar el c\u00f3digo embed que nos brinda la plataforma para insertar estos v\u00eddeos en donde nosotros querramos, pero este c\u00f3digo trae un ancho y alto definido lo cual muchas veces es un dolor de cabeza al tratar de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":797,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43,42,38],"tags":[36,44],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gumonet - Incrustar videos de YouTube responsivos<\/title>\n<meta name=\"description\" content=\"En este post te ense\u00f1amos a Incrustar videos de YouTube responsivos f\u00e1cil y r\u00e1pido utilizando JavaScript puro y solo un poco de CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gumonet - Incrustar videos de YouTube responsivos\" \/>\n<meta property=\"og:description\" content=\"En este post te ense\u00f1amos a Incrustar videos de YouTube responsivos f\u00e1cil y r\u00e1pido utilizando JavaScript puro y solo un poco de CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/\" \/>\n<meta property=\"og:site_name\" content=\"Gumonet\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-18T04:16:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-18T16:15:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2406\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"gumonet\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@gumonet\" \/>\n<meta name=\"twitter:site\" content=\"@gumonet\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"gumonet\" \/>\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\":\"Article\",\"@id\":\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/\"},\"author\":{\"name\":\"gumonet\",\"@id\":\"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94\"},\"headline\":\"Incrustar videos de YouTube responsivos\",\"datePublished\":\"2021-06-18T04:16:26+00:00\",\"dateModified\":\"2021-06-18T16:15:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/\"},\"wordCount\":424,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94\"},\"image\":{\"@id\":\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos.jpg\",\"keywords\":[\"Javascript\",\"snippets\"],\"articleSection\":[\"Snippets\",\"Tips\",\"Tutoriales\"],\"inLanguage\":\"es-MX\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/\",\"url\":\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/\",\"name\":\"Gumonet - Incrustar videos de YouTube responsivos\",\"isPartOf\":{\"@id\":\"https:\/\/gumonet.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos.jpg\",\"datePublished\":\"2021-06-18T04:16:26+00:00\",\"dateModified\":\"2021-06-18T16:15:35+00:00\",\"description\":\"En este post te ense\u00f1amos a Incrustar videos de YouTube responsivos f\u00e1cil y r\u00e1pido utilizando JavaScript puro y solo un poco de CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#breadcrumb\"},\"inLanguage\":\"es-MX\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es-MX\",\"@id\":\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#primaryimage\",\"url\":\"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos.jpg\",\"contentUrl\":\"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos.jpg\",\"width\":2406,\"height\":1260,\"caption\":\"Incrustar videos de YouTube responsivos\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/gumonet.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Incrustar videos de YouTube responsivos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/gumonet.com\/#website\",\"url\":\"https:\/\/gumonet.com\/\",\"name\":\"Gumonet\",\"description\":\"DevOps and Web developer\",\"publisher\":{\"@id\":\"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/gumonet.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es-MX\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94\",\"name\":\"gumonet\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-MX\",\"@id\":\"https:\/\/gumonet.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/01\/cropped-icon.png\",\"contentUrl\":\"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/01\/cropped-icon.png\",\"width\":512,\"height\":512,\"caption\":\"gumonet\"},\"logo\":{\"@id\":\"https:\/\/gumonet.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/gumonet.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gumonet - Incrustar videos de YouTube responsivos","description":"En este post te ense\u00f1amos a Incrustar videos de YouTube responsivos f\u00e1cil y r\u00e1pido utilizando JavaScript puro y solo un poco de CSS.","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:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/","og_locale":"es_MX","og_type":"article","og_title":"Gumonet - Incrustar videos de YouTube responsivos","og_description":"En este post te ense\u00f1amos a Incrustar videos de YouTube responsivos f\u00e1cil y r\u00e1pido utilizando JavaScript puro y solo un poco de CSS.","og_url":"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/","og_site_name":"Gumonet","article_published_time":"2021-06-18T04:16:26+00:00","article_modified_time":"2021-06-18T16:15:35+00:00","og_image":[{"width":2406,"height":1260,"url":"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos.jpg","type":"image\/jpeg"}],"author":"gumonet","twitter_card":"summary_large_image","twitter_creator":"@gumonet","twitter_site":"@gumonet","twitter_misc":{"Escrito por":"gumonet","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#article","isPartOf":{"@id":"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/"},"author":{"name":"gumonet","@id":"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94"},"headline":"Incrustar videos de YouTube responsivos","datePublished":"2021-06-18T04:16:26+00:00","dateModified":"2021-06-18T16:15:35+00:00","mainEntityOfPage":{"@id":"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/"},"wordCount":424,"commentCount":0,"publisher":{"@id":"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94"},"image":{"@id":"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#primaryimage"},"thumbnailUrl":"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos.jpg","keywords":["Javascript","snippets"],"articleSection":["Snippets","Tips","Tutoriales"],"inLanguage":"es-MX","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/","url":"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/","name":"Gumonet - Incrustar videos de YouTube responsivos","isPartOf":{"@id":"https:\/\/gumonet.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#primaryimage"},"image":{"@id":"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#primaryimage"},"thumbnailUrl":"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos.jpg","datePublished":"2021-06-18T04:16:26+00:00","dateModified":"2021-06-18T16:15:35+00:00","description":"En este post te ense\u00f1amos a Incrustar videos de YouTube responsivos f\u00e1cil y r\u00e1pido utilizando JavaScript puro y solo un poco de CSS.","breadcrumb":{"@id":"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#breadcrumb"},"inLanguage":"es-MX","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/"]}]},{"@type":"ImageObject","inLanguage":"es-MX","@id":"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#primaryimage","url":"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos.jpg","contentUrl":"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/06\/Incrustar-videos-de-YouTube-responsivos.jpg","width":2406,"height":1260,"caption":"Incrustar videos de YouTube responsivos"},{"@type":"BreadcrumbList","@id":"https:\/\/gumonet.com\/incrustar-videos-de-youtube-responsivos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/gumonet.com\/"},{"@type":"ListItem","position":2,"name":"Incrustar videos de YouTube responsivos"}]},{"@type":"WebSite","@id":"https:\/\/gumonet.com\/#website","url":"https:\/\/gumonet.com\/","name":"Gumonet","description":"DevOps and Web developer","publisher":{"@id":"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gumonet.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es-MX"},{"@type":["Person","Organization"],"@id":"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94","name":"gumonet","image":{"@type":"ImageObject","inLanguage":"es-MX","@id":"https:\/\/gumonet.com\/#\/schema\/person\/image\/","url":"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/01\/cropped-icon.png","contentUrl":"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/01\/cropped-icon.png","width":512,"height":512,"caption":"gumonet"},"logo":{"@id":"https:\/\/gumonet.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/gumonet.com"]}]}},"_links":{"self":[{"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/posts\/794"}],"collection":[{"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/comments?post=794"}],"version-history":[{"count":8,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/posts\/794\/revisions"}],"predecessor-version":[{"id":816,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/posts\/794\/revisions\/816"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/media\/797"}],"wp:attachment":[{"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/media?parent=794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/categories?post=794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/tags?post=794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}