Mes: noviembre 2017

Reubicar la metadata al ver un video en Youtube

/ andrezgz / 1 comentario

Actualizado: 24/04/2022

Cada tanto me pasa que al ver un video de Youtube se referencia a su metadata (descripción del video) y me interesa poder verla mientras sigue la reproducción. Actualmente esta información se presenta más abajo (si es extensa, también está colapsada)  y obliga a hacer scroll, perdiendo de vista el video.

Teniendo una pantalla ancha existe el lugar para posicionar este contenido a la derecha del video, pero Youtube lo ocupa con la lista de reproducción o bien los videos relacionados (encabezado por el «A continuación»).

Ajustando con estilos

A continuación les comparto unos estilos CSS que permiten hacer estos ajustes a la hora de reproducir un video:

/* Ubicar metadata y detalles a la derecha */
@media (min-width: 999px){
  #description {
    position:absolute;
    top:65px;
    right:0;
    width:25% !important;
    height:700px;
    overflow:auto;
  }

  /* Ubicar videos relacionados y playlist debajo */
  #related, #playlist {
    position:absolute;
    width: 25% !important;
    top:800px
  }
  
  /* Optimizar el espacio disponible */
  .description.ytd-video-secondary-info-renderer{
    margin-left:0;
  }
}

Disclaimer: Es posible que existan casos no contemplados y que Youtube cambie la estructura HTML haciendo que lo expuesto anteriormente tenga fallos o no funcione directamente… pero siempre se puede ajustar! Seguramente también existan formas más limpias y apropiadas de reubicar los elementos :).

Extensiones para facilitar la tarea

Para evitar tener que agregar estos estilos mediante las herramientas del desarrollador cada vez que se carga la página (algo no deseable) encontré extensiones (complementos o addons) para los principales navegadores que lo resuelven bastante bien. Ambas permiten definir una serie de estilos que quedan asociados al sitio y los podés activar/desactivar desde el botón de la extensión.

  • Chrome: User CSS es muy fácil de usar, con una interfaz sencilla para la configuración
  • Firefox: Custom Style Script requiere acceder a una pestaña de configuración, pero al mismo tiempo permite establecer código javascript

Esta publicación fue originada a partir de un pedido de los seguidores del Resumen Semanal de FabioTV.