Cómo detectar vídeos embebidos rotos

Si tienes o gestionas una web que utiliza vídeos embebidos de otras plataformas cómo YouTube, seguro que te has encontrado más de una vez con la desagradable sorpresa de que la miniatura del vídeo no se visualiza por algún motivo.

Mira, hablo de una imagen como esta. Te suena ¿verdad?

Si es tu caso, en este artículo te voy a mostrar algunas de las maneras de poder detectarlos sin tener que pasar por cada página de tu web para que puedas arreglarlos. Para ello tomaremos como ejemplo los vídeos embebidos de YouTube.

Por qué no se visualizan los vídeos embebidos

Lo primero que debes saber es que existen diversas casuísticas que pueden hacer que un vídeo de YouTube no se visualice en tu página web: el vídeo es privado (como el caso de la imagen), el vídeo ya no existe, no se permite la visualización en plataformas externar, etc.

Todas estas casuísticas son cambiantes a lo largo del tiempo. Un vídeo que añadas a tu web hoy, puede no estar disponible mañana. Y esto no podemos evitarlo, tan solo controlarlo. Así que vamos a ello.

Cómo detectar vídeos rotos de YouTube

Antes de empezar a explicarte un método de ejemplo, decirte que dependiendo de cada web puede variar ligeramente. En todo caso, puedes adaptar este método a tu situación concreta.

Dicho esto, tomaremos como ejemplo una web a la que tengo mucho cariño, la de la universidad dónde me he formado como profesional de la comunicación y el marketing: la UOC.

Mira, en sus fichas de producto nos ofrecen vídeos promocionales o explicativos y (a día de hoy) algunos de ellos están rotos: no se pueden visualizar. Esto ofrece una mala experiencia de usuario y puede afectar a la apariencia visual de la página. Supongo que estarás de acuerdo.

Mira, hablo de esto:

Pues esto es solo un caso, y como no sabemos si esta afectación se produce en más de un programa, teniendo en cuanta que tienen más de 400, vamos a ver cómo lo podemos saber sin tener que ir página por página.

Paso 1. Busca un elemento identificador que sea común

Lo primero que debes hacer es buscar un elemento que sea común en cada una de las afectaciones. Recuerda que en cada caso puede ser diferente. En este caso de ejemplo, es componente del vídeo carga la imagen de miniatura del vídeo y cómo no lo encuentra carga una imagen por defecto de YouTube.

Teniendo en cuenta que siempre que falle cargará la misma ya tenemos nuestro elemento común identificado.

Paso 2. Identificación del elemento

Ahora necesitamos saber cómo se llama esa imagen y dónde está ubicada. Para ello utilizaremos el inspector de nuestro navegador. Recuerda que puedes acceder a él mediante la tecla F12 o haciendo clic en el botón derecho del ratón y seleccionar «Inspeccionar».

Si seleccionamos el elemento en cuestión; la miniatura del vídeo que no se ve, podremos ver tanto su nombre como su ubicación en el código HTML. Te muestro el ejemplo:

En lo que se refiere a la dirección de la imagen, podemos identificarla en el atributo «src» del código que como puedes ver es la siguiente:

img.youtube.com/vi/enablejsapi/maxresdefault.jpg

Este dato nos irá bien para identificar esta imagen del resto cuando realicemos la extracción. La lógica será la siguiente: si aparece el nombre de esta imagen, el vídeo estará roto. En caso contario, el vídeo estará correctamente. De esta manera podremos filtrar. Pero esto será un poco más adelante.

Ahora también necesitamos encontrar la ruta del elemento. Es decir, como está situado en el código. Esto lo podemos hacer fácilmente mediante expresiones XPath, ya que esta sitúan el elemento en el código de forma jerárquica.

En este caso tan solo nos debemos fijar en dos detalles:

1. La imagen (img) está ubicada dentro de un contenedor (div) con un nombre de clase determinado.
2. El dato que nos interesa está dentro de un atributo llamado «srcset» de la imagen.

Mira, la parte del código que nos interesa es esta. Fíjate en los elementos y su estructura.

<div class="uoc-ncard__image-container shadowable">
            <img srcset="//img.youtube.com/vi/enablejsapi/maxresdefault.jpg" 

Pues bien, con esto ya podemos construir nuestra expresión XPath que nos servirá para extraer la información de este elemento concreto. Es la siguiente:

(//div[@class='uoc-ncard__image-container shadowable']/img/@srcset)[position()<=2]

Por si no conoces este tipo de expresiones te explico esta brevemente. Puedes pasar directamente al siguiente punto por si no te interesa.

Explicación de la fórmula aplicada

1. //div[@class='uoc-ncard__image-container shadowable']: Este segmento busca en el documento HTML cualquier elemento <div> que tenga exactamente las clases uoc-ncard__image-container y shadowable.
2. /img/@srcset: Después de encontrar los <div>s que cumplen con el criterio de clase, este segmento selecciona los atributos srcset de los elementos <img> que son hijos directos de dichos <div>s.
3. (..)[position()<=2]: Esta parte de la fórmula envuelve toda la expresión anterior entre paréntesis y luego filtra los resultados para obtener solamente los que están en las primeras dos posiciones de la lista de resultados.

Paso 3. Extracción de la información

Una vez tenemos identificada la posición del elemento ya podemos realizar la extracción de la información (scraping). Lo haremos mediante la herramienta Screaming Frog.

Esta es una de las herramientas de rastreo mejor valoradas por los profesionales. Y esto no es baladí, ya que cuenta con un sin fin de funcionalidades. Entre ellas la extracción de elementos HTML. Esto nos viene como anillo al dedo para el caso que nos ocupa.

Una vez accedas a Screaming Frog, tan solo tienes que realizar dos acciones. Añadir el elemento del que queremos extraer la información y añadir el listado de páginas a analizar. Vamos a verlo.

Añadir el elemento para la extracción de información

Para poder extraer la información de un elemento concreto con Screaming Frog, dirígete al menú superior Configuración > Personalizado > Extracción personalizada.

Una vez accedas a extracción personalizada, tienes que darle al botón de añadir, pegar el código XPath que hemos visto antes. Seleccionamos que queremos extraer, en este caso, el HTML interno y le damos a aceptar.

Añadir las URLs a rastrear

Ahora que ya tenemos introducido en la herramienta el elemento concreto que queremos analizar, tan solo nos queda indicarle que URLs tiene que rastrear. Para ello lo podemos hacer mediante dos modos. El modo araña o modo lista.

Yo te recomiendo este segundo para acotar la búsqueda y que sea más eficiente. Eso sí, ten en cuanta que debes contar con ese listado.

Para hacerlo, primeramente, en el menú superior selecciona lo siguiente: Modo > Lista.

Ahora copia tu listado de URLs, selecciona el botón «Importar» y dale a «Pegar». Justo ahí:

Ahora la herramienta comenzará a «escrapear» las URL en busca de esa información. Una vez finalice el rastreo. Si nos situamos en la pestaña «Extracción personalizada» podremos ver toda esa información.

Finalmente, puedes descargar esa información en un documento y filtrar cada columna por la url de la imagen que hemos visto antes. Así ya tendremos todas las URL con vídeos rotos identificadas para poder arreglarlos.

Esto es todo. Espero que te haya resultado de utilidad. Cualquier duda, nos vemos en los comentarios.

¡Hasta la próxima!