Script para desbloquear vídeo en Youtube al compartir en Facebook. SIN PLUGIN

S

steven77

Invitado
Buenos noches a todxs lxs compañerxs del foro. Este será mi primer tema, y bueno no sé si ya antes han creado uno igual.

Lo que les traigo son unas cuantas líneas de código de CSS y JQuery, que nos permitirán bloquear un vídeo en youtube en nuestra web, y para desbloquearlo tendremos que compartirlo por Facebook. Esto nos ayudará si queremos obtener más tráfico en nuestros vídeos y de que esa manera puedan hacerse virales.

Sin más rollo, aquí les va:

CSS
Código:
<style>
#video {
margin:0px auto;
max-width:480px;
height: 360px;
position: relative;
display: block;
}
#videolock {
position: absolute;
cursor: pointer;
z-index: 2;
background: url(http://2.bp.blogspot.com/-Rj5c1lmEM9g/UtniLGoigVI/AAAAAAAAAbI/fdgI60C_P0M/s1600/videolock.png) no-repeat;
width:480px;
height: 360px;
display: block;
}
</style>


JQuery/Javascript
Código:
<script type='text/javascript'> 
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId: '834376999908196', 
status: false,
xfbml: false
});
// Additional initialization code such as adding Event Listeners goes here
};

jQuery(document).ready(function(){
jQuery('#videolock').click(function () {
FB.ui({
method: '../sharer/sharer.php?u=' +document.URL+ '',
link : document.URL
},
function (response) {
if( response) {
jQuery("#videolock").hide();
} 
});
});
});
function youtube (IDyoutube) {
var output = '<div id="video"><div id="videolock"></div><iframe frameborder="0" allowfullscreen=""  height="360" width="480" src="http://www.youtube.com/embed/'+IDyoutube+'"></iframe></div>';
document.write (output);
}
//]]>
</script>


Si desean lo guardan en archivos diferentes y luego los llaman, en mi caso lo tengo dentro de mi etiqueta head.

Terminado esto, dentro la entrada que vayamos a crear, o donde nos parezca más conveniente poner el vídeo lo llamamos de la siguiente manera:
Código:
<script> youtube("7-4NOBBpen0")</script>

Lo que está dentro de la función youtube es tan sólo es el ID del vídeo de Youtube.

vid.jpg

Y con eso ya puedes tener un vídeo en tu web que para que lo vean deben compartirlo.

vid.jpg
vid.jpg

Espero les haya servido por si es que aún no existe una entrada creada similar. Y a ver si quedo entre los primeros del ranking de temas.

Saludos y hasta la próxima.
 
Última edición:

maestrodellaves

Diamante
Usuario de Bronce
Mensajes
2,830
Puntuación de reacción
5
Y a ver si quedo entre los primeros del ranking de temas.

El tuto es muy bueno, pero para el ranking deberías haber seleccionado [TUTORIAL] en el titulo.
Intenta modificarlo o pídele a un moderador que lo haga si no puedes tu.
 

sevilla92

Oro Blanco
Usuario de Bronce
Mensajes
511
Puntuación de reacción
7
esto lo he visto yo ya antes en el otro foro... ejem ejem...

- - - Actualización- - -

esto lo he visto yo ya antes en el otro foro... ejem ejem...
 
Mensajes
283
Puntuación de reacción
0
¿Existe esto mismo para bloquear un video en blogger? me interesaria muchisimo
 
Mensajes
419
Puntuación de reacción
0
Buenos noches a todxs lxs compañerxs del foro. Este será mi primer tema, y bueno no sé si ya antes han creado uno igual.

Lo que les traigo son unas cuantas líneas de código de CSS y JQuery, que nos permitirán bloquear un vídeo en youtube en nuestra web, y para desbloquearlo tendremos que compartirlo por Facebook. Esto nos ayudará si queremos obtener más tráfico en nuestros vídeos y de que esa manera puedan hacerse virales.

Sin más rollo, aquí les va:

CSS
Código:
<style>
#video {
margin:0px auto;
max-width:480px;
height: 360px;
position: relative;
display: block;
}
#videolock {
position: absolute;
cursor: pointer;
z-index: 2;
background: url(http://2.bp.blogspot.com/-Rj5c1lmEM9g/UtniLGoigVI/AAAAAAAAAbI/fdgI60C_P0M/s1600/videolock.png) no-repeat;
width:480px;
height: 360px;
display: block;
}
</style>


JQuery/Javascript
Código:
<script type='text/javascript'> 
//<=!=[=C=D=A=T=A=[
window.fbAsyncInit = function() {
FB.init({
appId: '834376999908196', 
status: false,
xfbml: false
});
// Additional initialization code such as adding Event Listeners goes here
};

jQuery(document).ready(function(){
jQuery('#videolock').click(function () {
FB.ui({
method: '../sharer/sharer.php?u=' +document.URL+ '',
link : document.URL
},
function (response) {
if( response) {
jQuery("#videolock").hide();
} 
});
});
});
function youtube (IDyoutube) {
var output = '<div id="video"><div id="videolock"></div><iframe frameborder="0" allowfullscreen=""  height="360" width="480" src="http://www.youtube.com/embed/'+IDyoutube+'"></iframe></div>';
document.write (output);
}
//]=]=>
</script>


Si desean lo guardan en archivos diferentes y luego los llaman, en mi caso lo tengo dentro de mi etiqueta head.

Terminado esto, dentro la entrada que vayamos a crear, o donde nos parezca más conveniente poner el vídeo lo llamamos de la siguiente manera:
Código:
<script> youtube("7-4NOBBpen0")</script>

Lo que está dentro de la función youtube es tan sólo es el ID del vídeo de Youtube.

Ver el archivo adjunto 3320

Y con eso ya puedes tener un vídeo en tu web que para que lo vean deben compartirlo.

Ver el archivo adjunto 3321
Ver el archivo adjunto 3322

Espero les haya servido por si es que aún no existe una entrada creada similar. Y a ver si quedo entre los primeros del ranking de temas.

Saludos y hasta la próxima.

No me funciona, tapa el video, pero cuando haces clic para desbloquearlo no hace nada!
 
Arriba