Reubicar la metadata al ver un video en Youtube

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 */
 #main > #meta {
   position:absolute;
   background-color:white;
   top:65px;
   right:0;
   width:700px !important;
   height:500px;
   overflow:auto;
 }

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

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

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.

Anuncios