Reubicar la metadata al ver un video en Youtube

Actualizado: 30/07/2018

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 la metadata a la derecha */
 #primary-inner > #meta {
   position:absolute;
   background-color:white;
   top:65px;
   right:0;
   width:25% !important;
   height:700px;
   overflow:auto;
 }

/* Ubicar videos relacionados y playlist debajo */
 #related, #playlist {
   position:absolute;
   top:800px
 }

/* Forzar que el video quede por encima al agrandarlo */
 #player {
   z-index:2;
 }

/*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 :).

Estos estilos se pueden aplicar dentro de un media query para aplicarlo solo a partir de cierto ancho:

@media (min-width: 999px){
  /* Ubicar la metadata a la derecha */
    #meta { position:absolute;
    ...
}

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.

Anuncios