Resulta muy molesto y poco eficiente, en muchas ocasiones, incrustar videos de YouTube en nuestro sitio web.
El problema principal radica en que: La mayoría de ocasiones, los usuarios terminan en YouTube y abandonan nuestro sitio.
Lo anterior, suele ser un problema en landings o páginas de ventas.
Hace poco, tuve la necesidad de evitar por completo cualquier interacción con los videos de YouTube alojados en una página.
En resumen: Cómo ocultar los controles y botones en los videos de YouTube.
Te cuento cómo.
Creando un reproductor personalizado para vídeos alojados en YouTube.
El truco es bastante simple: Usamos la librería de videojs + framework/extensión de videojs para YouTube y un pequeño script que programé de nombre overlay.
A continuación, te comparto lo que necesitamos, son sus enlaces de descarga.
- VideoJs.
- YouTube Playback para VideoJs.
- VideoJs Overlay. (Clic derecho, guardar como).
El proceso es bastante simple: Debes descargar las librerías anteriores, guardarlas en tu directorio y hacer uso de ellas. En mi caso en cuanto a VideoJs, usé los CDN. (Te los comparto a continuación, en la implementación).
El resultado, debe ser un video con controles inhabilitados:
Ahora, vayamos a la implementación. No entraré en detalles, pero si tienes dudas, siempre puedas dejarla en los comentarios. 😉
Configurando Videojs como reproductor personalizado en videos de YouTube.
El video de ejemplo que ves arriba, es algo bastante simple:
Un fragmento de HTML donde incrusto el código necesario para mostrar el vídeo, en el orden correcto.
Empecemos:
Videojs: En cuanto a esta librería, preferí usar los CDN, así me evito descargas y mantengo siempre la última versión. Debes usar esto: (Te explico al final como usar todo en conjunto).
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
YouTube para Videojs: Lo siguiente, es una librería adicional que permite reproducir videos de YouTube con videojs.
<script src="https://concamilo.com/videojs/youtube.js"></script>
Finalmente, nos queda al archivo overlayjs: El objetivo de este archivo, es crear una capa invisible en todo el vídeo, que evita puedas dar clic sobre los elementos del mismo.
https://concamilo.com/videojs/overlay.js
El paso final, es hacer uso de todo lo anterior y configurar tu vídeo.
Debe verse justo así:
<--! Estilos de videojs -->
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
<--! Aquí, configuras tu video. Tamaño, controles, y claro la URL del mismo,
tienes TODO en la documentación de cada librería -->
<video
id="vid1"
class="video-js vjs-default-skin vjs-fluid"
controls
autoplay
width="640"
data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}], "youtube": { "iv_load_policy": 1 } }'
>
</video>
<--! scripts de video js -->
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<--! extensión de youtube -->
<script src="https://concamilo.com/videojs/youtube.js"></script>
<--! pequeño script para el overlay -->
<script src="https://concamilo.com/videojs/overlay.js"></script>
El anterior código, es una muestra final de cómo debería verse el resultado u organización final.
En cuanto a videojs usé CDN. La extensión de YouTube para videojs, si la descargué. También el script de overlay.js.
Recuerda que en las páginas de cada extensión, encontrarás detalles de configuración e implementación.
Si tienes dudas, déjame un comentario y te responderé tan pronto pueda.
Compartir es amor.
#HappyCoding.