Vídeo pop up con jQuery

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.

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”] Vídeo pop up con jQuery

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

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]





Deja un comentario

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