Become a HubSpot power user — join us for HubSpot Training Day 2017.

COS-Pages-Editor

¿Cómo hago que mi video de YouTube incrustado sea responsivo?

Última actualización: February 16, 2016

Para hacer que un video de YouTube sea responsivo, agrega el siguiente código a tu archivo CSS principal o a la hoja de estilos aplicada a tu sitio:

/* YouTube Responsive CSS for HubSpot */

.hs-responsive-embed-youtube {

position: relative;

padding-bottom: 56.25%; /* 16:9 Aspect Ratio */

padding-top: 25px;

}

.hs-responsive-embed-youtube iframe {

position: absolute;

width: 100%!important;

height: 100%!important;

}

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

  • Una vez que hayas agregado este código, copia la URL para compartir del video de YouTube en cuestión.
  • Navega hasta el editor del blog, la página de destino o la página del sitio.
  • En un módulo de texto enriquecido, haz clic en Insertar > Insertar video.
Insertar redes sociales
Insertar redes sociales
  • Pega la URL para compartir del video de YouTube en el campo URL de redes sociales (puedes dejar las dimensiones en blanco).
  • Haz clic en Aceptar.
Pegar URL del video
Pegar URL del video

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

Ten en cuenta que si, en cambio, decides Incrustar el video, debes insertar el código de incrustación con la clase .hs-responsive-embed-youtube. En otras palabras, debes insertar el código de incrustación entre las siguientes etiquetas:
<div class="hs-responsive-embed-youtube"></div>