Obtener CódigoDemo

Hoy, aprenderemos de una manera fácil y sencilla, a bloquear un video de youtube hasta que el usuario lo comparta en su perfil de Facebook para poder verlo.

La idea es básica:

1. Creamos un javascript que tendrá la función “youtube()”, la cuál hará que ésto funcione bien.
2. Creamos los estilos de el reproductor.
3. Adicionamos los js y css creados a nuestro HTML.

Ahora, teniendo la idea planteada, vamos a realizar nuestro archivo JavaScript que tendrá lo siguiente:

blocker.js

Como podemos ver, tenemos la función “youtube()” que su trabajo es crear el div contenedor del video, el iframe del video y la vista previa.
Luego, podemos observar que tenemos otra función llamada “bloquear_youtube()”, la cuál se activará al hacer click en la vista previa y nos pedirá compartir. Si no lo compartimos, nos muestra una alerta de que debemos compartir para verlo.

Y por último, podemos vemos que se agrega el sdk de Facebook para que funcione correctamente.

blocker.css

Él archivo de los estilos, no requiere mucha explicación, ya que sólo son los estilos de cada div para darle una bonita apariencia.

index.html

 

En nuestro index, añadimos el css y js creados además de usar la librería de jQuery 1.8+. Como podemos ver, tenemos un script que se ejecuta llamando a la función “youtube()”. En var video = ‘aHjpOzsQ9YI’ debemos ingresar el id de nuestro video a compartir y éso sería todo. Se ha adicionado Bootstrap para los estilos de la demostración.

Obtener CódigoDemo

Williams Azabache Sarmiento

Que puedo decir...