Vídeo pop up con jQuery

Tabla de contenidos

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

 

Picture of Jose Hilario
Jose Hilario
¡Apasionado del diseño web! Especializado en WordPress, WooCommerce y Elementor PRO. Me encanta diseñar páginas web atractivas y optimizadas para SEO. Mi objetivo: impulsar a las empresas con un diseño web atractivo y funcional.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Relacionados: