Mostrar en la home un vídeo pop up con jQuery, este ejemplo se ha implementado con cookies para solo mostrar 1 vez el vídeo.
Vídeo pop up con jQuery
Video Pop Up con jQuery, mostrar en la home un vídeo mediante un pop up con jQuery, usando cookies para solo mostrar 1 vez el vídeo.
ARCHIVO HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video Pop Up con jQuery</title>
<link rel="stylesheet" href="css/style.css" />
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="content">
<h1>Video Pop Up con jQuery</h1>
<p>Al cargar la web, se carga un vídeo con un pop up con el fondo en negro y se guarda una cookie.</p>
<p class="textos"></p>
</div>
</body>
</html>
ARCHIVO JQUERY
// JavaScript Document
$(document).ready(function() {
$(window).load(function(){
comprueba_cookies();
});
//COMPRUEBA COOKIES
var comprueba_cookies = function (){
if ($.cookie("VIDEOHOME") != null) {
$('.textos').html('Guardada la cookie, se vio el vídeo');
}else{
$.cookie('VIDEOHOME', 'visto', { expires: 1 });
lacookie = $.cookie('VIDEOHOME');
saca_video_home();
}
}
// SACAR VIDEO HOME
var saca_video_home = function(alto){
var alto=$(document).height();
$('body').prepend('<div class="contenedor-videohome"><div class="videohome"><div class="cerrar-videohome"><img src="images/cerrar.png"></div><iframe width="698" height="393" src="//www.youtube.com/embed/w5srnNrICJo?rel=0&autoplay=1 " frameborder="0" allowfullscreen=""></iframe></div></div>');
$('.contenedor-videohome').hide().fadeIn( "slow");
$('.contenedor-videohome').css('height',alto);
$('.videohome').hide().fadeIn( "slow");
$('.videohome').animate({ "margin-top": "110px" , "opacity" : 100 }, "slow" );
$('.cerrar-videohome').click(function () {
$('.textos').html('Ya has visto el vídeo. ¿Deseas verlo de nuevo?</p><button class="vervideo">Ver vídeo</button>');
$('.videohome').animate({ "margin-top": "0px" , "opacity" : 0 }, "fast" );
$('.contenedor-videohome').fadeOut( "slow", function (){
$('.contenedor-videohome').remove();
});
$('.vervideo').click(function(){
saca_video_home();
});
});
var offset = $(".videohome").offset();
var topPadding = 15;
$(".videohome").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
//El vídeo hace scroll en la pantalla
$(window).scroll(function() {
if ($(".videohome").height() < $(window).height() && $(window).scrollTop() > offset.top) {
$(".videohome").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$(".videohome").stop().animate({
marginTop: 0
});
};
});
};
});
ARCHIVO CSS
/* CSS Document */
body{
background:#81d742;
margin:0;
}
.content{
width:1000px;
margin-top:50px;
min-height:600px;
background:#fff;
margin:0 auto;
padding:20px;
}
.contenedor-videohome{
background: rgba(0, 0, 0, 0.71);
position: absolute;
width: 100%;
z-index: 999999;
display: block;
}
.videohome {
background: #fff;
width: 700px;
padding: 3px;
margin: 0 auto;
margin-top: -110px;
opacity:0;
display: block;
margin-top: -110px;
}
.cerrar-videohome {
position: absolute;
margin-left: 720px;
cursor:pointer;
}
