Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
CMS-Pages-Editor

Haz que tu video de YouTube incrustado sea adaptable

Última actualización: diciembre 19, 2018

Requisitos

Marketing Hub Professional, Enterprise
Básico

Para crear un video de YouTube adaptable, agrega el siguiente código CSS a la hoja de estilo aplicada en tu sitio:

  /* YouTube Responsive CSS for HubSpot */ 

.hs-responsive-embed {
position: relative;
height: 0;
overflow: hidden;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}


.hs-responsive-embed iframe,
.hs-responsive-embed object,
.hs-responsive-embed embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}


.hs-responsive-embed,
.hs-responsive-embed.hs-responsive-embed-youtube,
.hs-responsive-embed.hs-responsive-embed-wistia,
.hs-responsive-embed.hs-responsive-embed-vimeo {
padding-bottom: 56.25%;
}

Este código CSS se aplicará a los videos de YouTube agregados a través de la función de medios de incrustación del editor de contenido.

  • Después de agregar el código CSS, copia la URL de compartir del video de YouTube para incrustar.
  • Navega a tu blog, páginas de destino o páginas de sitio web.
  • Coloca el cursor sobre una página o publicación y haz clic en Editar.
  • Busca un módulo de texto enriquecido. Haz clic en el módulo y haz clic en Insertar > Incrustar.
insert-embed-rich-text-editor
Insertar elementos multimedia
  • Pega la URL del video de YouTube en el campo URL y luego haz clic en Aceptar.
embed-url
Pegar URL del video

Todos los videos de YouTube se harán responsivos si los agregas a través de estos pasos.

Nota:si seleccionas la opción Código, debes envolver el código de incrustación con la clase .hs-responsive-embed-youtub (por ejemplo, <div class="hs-responsive-embed-youtube"></div>).