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
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=586538018131285";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId: '586538018131285',
status: true,
xfbml: true
});
};
function bloquear_youtube() {
FB.ui({
method: '../sharer.php?u='+document.URL+'&t',
},
function(response) {
if (response) {
$("#image, #play, #play-button, #sharebox").fadeOut('slow');
} else {
alert('Debes compartir para ver el video');
}
}
);
}
function sharebox(){
$("#sharebox").show();
}
function youtube (IDyoutube) {
var output1 = '<div id="bloquear_youtube"><div id="image" style="background-image: url(http://img.youtube.com/vi/' + IDyoutube + '/0.jpg)"><div id="play"><div id="play-button" onclick="sharebox();"></div></div><div id="sharebox" onclick="bloquear_youtube();"></div></div><iframe width="480" height="360" src="http://www.youtube.com/embed/'+IDyoutube+'?autoplay=0" frameborder="0" allowfullscreen></iframe></div>';
document.write (output1);
}
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
.top_separacion
{
margin-top:20px;
}
#bloquear_youtube {
position:relative;
margin:0px auto;
cursor:;
overflow: hidden;
border:0px solid #000;
width:480px;
height:360px;
}
#bloquear_youtube iframe {
display:;
}
#bloquear_youtube #image {
width:100%;
height:100%;
background-size:100% 100%;
}
#bloquear_youtube #play {
position:absolute;
top:0;
left:0;
display:block;
width:480px;
height:360px;
background: url('play.png');
border:0px solid #000;
z-index:1;
}
#bloquear_youtube #play-button {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:480px;
height:360px;
}
#bloquear_youtube #play-button:hover {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:480px;
height:360px;
background: url('play-2.png');
}
#bloquear_youtube #sharebox {
display:none;
cursor: pointer;
position: absolute;
top: 0;
left: 0px;
width: 480px;
height: 360px;
background: transparent url("compartir_fb.png") no-repeat scroll center center;
border: 0px solid #000;
z-index: 2;
}
É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
<html>
<head>
<title>Tutoriales: Youtube Compartir Facebook</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="http://img.youtube.com/vi/GNF3KI7Po_o/default.jpg" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel='stylesheet' href='blocker.css' type='text/css' media='all' />
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' type='text/css' media='all' />
<script src="blocker.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col-md-12 top_separacion">
<a href="" class="btn btn-danger">Regresar al Post</a>
</div>
<div class="col-md-12 top_separacion">
<script>
var video = "aHjpOzsQ9YI";
youtube(video);
</script>
</div>
</div>
</div>
</body>
</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.
