{"id":1480,"date":"2018-07-08T08:08:45","date_gmt":"2018-07-08T13:08:45","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=1480"},"modified":"2024-11-01T11:36:47","modified_gmt":"2024-11-01T16:36:47","slug":"insertar-video-youtube-caracteristicas-responsive","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/insertar-video-youtube-caracteristicas-responsive\/","title":{"rendered":"Video YouTube con caracter\u00edsticas responsive"},"content":{"rendered":"<p>Uno de los primeros dolores de cabeza al integrar YouTube a un sitio web es lograr que los videos sean <em><a href=\"https:\/\/e-lexia.com\/diccionario-tic\/responsive-web-design\/\" rel=\"noopener\" target=\"_blank\">responsive<\/a><\/em>, es decir, que estos se adapten correctamente al espacio disponible en pantalla.<\/p>\n<p>Por defecto, las plataformas de video entregan un c\u00f3digo de inserci\u00f3n que define un ancho y un alto fijo, lo cual dificulta la presentaci\u00f3n del audiovisual en dispositivos m\u00f3viles, especialmente cuando se inserta en un contenedor que s\u00ed es <em>responsive<\/em>.<\/p>\n<p>Afortunadamente, existe un truco (o <em>hack<\/em>, si as\u00ed lo quieres llamar) que exige al c\u00f3digo de YouTube adaptarse al espacio, sin afectar la composici\u00f3n del video y la imagen miniatura, y respetar el flujo HTML.<\/p>\n<p>A continuaci\u00f3n, el paso a paso para lograrlo.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>C\u00f3digo de inserci\u00f3n de YouTube<\/h2>\n<p>La primera acci\u00f3n es copiar la etiqueta HTML que permite incrustar el video en la p\u00e1gina web:<\/p>\n<ul>\n<li>Ingresar a YouTube.com<\/li>\n<li>Identificar el video a insertar<\/li>\n<li>Presionar el bot\u00f3n \u00abCompartir\u00bb<\/li>\n<li>En la secci\u00f3n \u00abCompartir un v\u00ednculo\u00bb, acceder a \u00abIncorporar\u00bb<\/li>\n<\/ul>\n<p>Aqu\u00ed aparece un panel de configuraci\u00f3n donde se puede:<\/p>\n<ul>\n<li>Indicar en qu\u00e9 minuto \u2013 segundo iniciar\u00e1 el video en el sitio web<\/li>\n<li>Desde \u00abMostrar los controles del reproductor\u00bb se puede habilitar los manejadores de reproducci\u00f3n, pausa, volumen, l\u00ednea de tiempo, entre otros.<\/li>\n<li>Habilitar el modo de privacidad mejorada.<\/li>\n<\/ul>\n<p>Una vez se han configurado estas opciones, solo hace falta copiar la etiqueta <code>IFRAME<\/code>, que aparece al inicio de este panel.<\/p>\n<h2>Limpiar c\u00f3digo HTML<\/h2>\n<p>El c\u00f3digo que se copia de YouTube es similar al siguiente. Obviamente, cambia el ID del video.<\/p>\n<pre>\r\n&lt;iframe width=\"560\" height=\"315\"\r\n  src=\"https:\/\/www.youtube.com\/embed\/mbJ7Dm_b0W4?rel=0\" \r\n  frameborder=\"0\" allow=\"autoplay; \r\n  encrypted-media\" allowfullscreen&gt;\r\n&lt;\/iframe&gt;\r\n<\/pre>\n<p>Como se aprecia, est\u00e1n definidos los par\u00e1metros de alto (<code>width=\"560\"<\/code>) y ancho (<code>height=\"315\"<\/code>) fijos. Adem\u00e1s, est\u00e1 el par\u00e1metro de borde (<code>frameborder=\"0\"<\/code>).<\/p>\n<p>Lo que corresponde a continuaci\u00f3n es eliminar estos tres par\u00e1metros y sus respectivos valores.<\/p>\n<p>El nuevo c\u00f3digo queda similar a este:<\/p>\n<pre>\r\n&lt;iframe \r\n  src=\"https:\/\/www.youtube.com\/embed\/mbJ7Dm_b0W4?rel=0\"\r\n  allow=\"autoplay;\r\n  encrypted-media\" allowfullscreen&gt;\r\n&lt;\/iframe&gt;<\/pre>\n<h2>Crear un contenedor responsive<\/h2>\n<p>Como el recurso de YouTube no tiene alto ni ancho, es necesario crear un contenedor que controle estas caracter\u00edsticas.<\/p>\n<p>Lo anterior se logra definiendo una etiqueta <code>DIV<\/code> que encierre el <code>IFRAME<\/code>. <\/p>\n<p>Es preciso indicar que el <code>DIV<\/code> debe llevar una clase <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/css\/\" rel=\"noopener\" target=\"_blank\">CSS<\/a> que controle las proporciones.<\/p>\n<p>El nuevo c\u00f3digo luce similar a este:<\/p>\n<pre>\r\n&lt;div class=\"yt-video\"&gt;\r\n  &lt;iframe \r\n    src=\"https:\/\/www.youtube.com\/embed\/mbJ7Dm_b0W4?rel=0\"\r\n    allow=\"autoplay; \r\n    encrypted-media\" allowfullscreen&gt;\r\n  &lt;\/iframe&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Para este ejemplo se ha utilizado la clase <code>yt-video<\/code>, pero se puede elegir cualquier otro nombre. Por ejemplo: <code>vimeo-responsive<\/code>.<\/p>\n<h2>Estilos CSS para caja <em>responsive<\/em><\/h2>\n<p>El \u00faltimo paso es definir las reglas CSS con sus respectivas declaraciones. <\/p>\n<p>La primera afecta el <code>DIV<\/code> y la segunda, el <code>IFRAME<\/code> o similar (de acuerdo con la plataforma).<\/p>\n<p>Las reglas CSS son:<\/p>\n<pre>\r\n.yt-video {\r\n  height: 0;\r\n  padding-bottom: 56.25%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.yt-video iframe,\r\n.yt-video object,\r\n.yt-video embed {\r\n  height: 100%;\r\n  left: 0;\r\n  position: absolute;\r\n  top: 0;\r\n  width: 100%;\r\n}\r\n<\/pre>\n<p><!-- ASESOR YOUTUBE --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/expert-product-youtube-platinum-juancadotcom.png\" alt=\"Juan Carlos Morales S., Experto de Productos Google para YouTube\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en YouTube?<\/a><\/h2>\n<p>Convierte tu canal de YouTube en un activo para tu empresa o proyecto personal. Como Experto de Productos Google para YouTube, estoy dispuesto a ser parte de tu sue\u00f1o audiovisual.<\/br><br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<h2>Un regalo HTML<\/h2>\n<p>Por \u00faltimo, se recomienda insertar un marco que d\u00e9 una mejor apariencia al reproductor de YouTube. <\/p>\n<p>Este es un nuevo <code>DIV<\/code> que agrupa el c\u00f3digo mencionado y est\u00e1 definido por una regla CSS.<\/p>\n<p>El HTML queda similar a este:<\/p>\n<pre>\r\n&lt;div class=\"marco-yt\"&gt;\r\n  &lt;div class=\"yt-video\"&gt;\r\n    &lt;iframe\r\n      src=\"https:\/\/www.youtube.com\/embed\/mbJ7Dm_b0W4?rel=0\"\r\n      allow=\"autoplay;\r\n      encrypted-media\" allowfullscreen&gt;\r\n    &lt;\/iframe&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Y la clase CSS <code>marco-yt<\/code> tendr\u00eda este c\u00f3digo:<\/p>\n<pre>\r\n.marco-yt {\r\n  background: #1b1b1b;\r\n  border-radius: 8px;\r\n  box-shadow: 2px 2px 10px #999;\r\n  box-sizing: border-box;\r\n  margin: 32px 0 16px 0;\r\n  padding: 16px;\r\n  width: 100%;\r\n}\r\n<\/pre>\n<p>Lo que resta es llevar el c\u00f3digo a la p\u00e1gina HTML y las declaraciones a la respectiva hoja de estilos.<\/p>\n<p><!-- RUTA DE APRENDIZAJE --><\/p>\n<p class=\"ruta-aprendizaje\">\u00bfQuieres aprender m\u00e1s? Ingresa a la ruta de aprendizaje <a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/12zeO7SxebSig603vHCP6KUT6fIPQulc_ynWaGTehruE\/edit?usp=sharing\" rel=\"noopener\" target=\"_blank\">Quiero ser YouTuber<\/a> para ampliar tus conocimientos, habilidades y destrezas en el tema.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uno de los primeros dolores de cabeza al integrar YouTube a un sitio web es lograr que los videos sean responsive, es decir, que estos se adapten correctamente al espacio disponible en pantalla. Por defecto, las plataformas de video entregan un c\u00f3digo de inserci\u00f3n que define un ancho y un&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1563,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48],"tags":[59,60,75],"class_list":["post-1480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-youtube","tag-estrategias","tag-rwd","tag-youtuber","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=1480"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1480\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1563"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=1480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=1480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=1480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}