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; }