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

Exportar todo el contenido de una MediaWiki en HTML

Necesitaba poder tener todas las páginas de una MediaWiki en formato HTML en un directorio, con sus imágenes, para poder usarlo como un respaldo navegable del estado actual de esa wiki. Encontré la extensión DumpHTML y la implementé tal como se indica:

  1. Descargar el archivo tar.gz de la extensión para la versión de MediaWiki instalada
  2. Descomprimir su contenido en el directorio extensions

Exportar el contenido

La acción se realiza desde la línea de comandos, ejecutando:

php <MEDIAWIKI_PATH>/extensions/DumpHTML/dumpHTML.php -d <DESTINATION_DIR> --image-snapshot

lo que dejará en el directorio DESTINATION_DIR todo el contenido listo para ser navegado.

  • El parámetro –image-snapshot, asegura la copia de las imágenes subidas

Configuraciones

Se pueden indicar otros parámetros para

  • -k <SKIN>: utilizar un skin en particular. El contenido respaldado apunta dicho skin en la wiki , por lo que requiere que esté en funcionamiento y sea accesible para que el skin sea visualizado correctamente.
    • Si no se especifica o bien si se indica el skin “offline”, se utiliza un skin básico disponible dentro del contenido respaldado.
  • –munge-title <ALGORITHM>: utilizar un algoritmo para transformar los nombres de páginas y archivos cuando contienen caracteres no soportados por el entorno desde el que se accederá al contenido.
    • md5: se transforman los nombres a partir de aplicarles MD5 (útil si existen caracteres UTF8)
    • windows: se quitan los caracteres no soportados en nombres de archivos en Windows ( /\*?”<>| )

Inconvenientes

No pude hacer que se exporte el thumbnail de cada imagen, que se visualizan en la página de la imagen.

En la versión 1.19 de MediaWiki me sucedieron 2 cosas:

En la primer ejecución, obtuve el error "Default users are not allowed to read, please specify (--group=sysop)". Pude solucionarlo agregando a la invocación

--group=user

Había realizado la exportación indicando el skin monobook, pero no se visualizaba correctamente y pude observar que se intentaban obtener los estilos desde "http://localhost/load.php?...". Pude solucionarlo estableciendo la url de la wiki en una variable de configuración de LocalSettings.php:

$wgServer = 'http://www.dominio-wiki.com';

y volviendo a exportar para que se apuntara correctamente al skin.

Acceder a página protegida con htaccess mediante PHP (curl)

Si necesitamos acceder a una página que se encuentre protegida por credenciales htaccess desde un script PHP, podemos utilizar la extensión curl que nos provee (pueden tener problemas al intentar activarla). Para ello, les porpongo un bloque de código que la utiliza:

<?php
  $url = 'http://www.destino.com/secure/index.php';
 
  $username = 'ht_user';
  $password = 'ht_pass';
 
  $ch=curl_init();
  curl_setopt($ch,CURLOPT_URL,$url);
  
  //Credenciales htaccess
  curl_setopt($ch, CURLOPT_USERPWD, "$username:$password");

  //curl_exec devuelve el contenido obtenido en lugar de True
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 
  $data = curl_exec($ch);
  
  curl_close($ch);
 
?>

En este ejemplo, obtendremos dentro la variable $data el contenido de la página index.php, para poder utilizarlo en el resto del script.

Se puede utilizar este medio para invocar otros scripts que devuelvan urls, json, etc. como si fuera un API a la aplicación.

Solucionar error de la extensión curl de PHP en Windows

Supongamos que necesitamos invocar una url a partir de nuestro código PHP. Una forma de hacerlo es mediante la extensión curl. Es posible que en Windows al intentar activarla, no logremos hacer que funcione.

Si el código que la utiliza es similar a:

<?php
  $ch=curl_init();
  curl_setopt($ch,CURLOPT_URL,'http://localhost/');
  curl_exec($ch);
  curl_close($ch);
 ?>

obtendremos el error:

Fatal error: Call to undefined function curl_init()

 

Para solucionarlo debemos primero verificar en el archivo de configuración php.ini que:

  • el directorio de extensiones (extension_dir) sea el correcto
  • la línea extension=php_curl.dll esté descomentada (sin el ; inicial)

A continuación ubicamos el directorio donde está instalado PHP y de allí copiamos los archivos:

  • libeay32.dll
  • ssleay32.dll

al directorio bin dentro de la ubicación donde se encuentra instalado de Apache.

Para finalizar reiniciamos el servicio de Apache.

 

Podemos corroborar que la extensión fue activada exitosamente a través de la información de phpinfo(), mediante un script con el código:

<?php
  phpinfo();
?>

Si volvemos a probar el código del principio veremos que funciona correctamente.