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.
¿Cómo crear un 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. Para implementar correctamente este video pop up, es recomendable consultar la documentación oficial de jQuery y asegurar que utilizas la versión más estable.
¿Cómo estructurar el 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>
¿Cómo escribir el código 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
});
};
});
};
});
¿Cómo diseñar con 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;
}
Implementar video pop up con jQuery
- Usa jQuery y cookies para mostrar un vídeo pop up solo una vez al cargar la página
- El pop up incluye un fondo negro que cubre toda la pantalla y se cierra con un botón
- Las cookies guardan que el usuario ya vio el vídeo durante 1 día de duración
- Al cerrar el pop up, aparece una opción para reproducir el vídeo nuevamente si lo desea
- El vídeo se anima con transiciones de fade in y desplazamiento para mayor impacto visual
