Error en sintaxis

[ekisdedede]

Hola a todos,

Estoy intentando poner un video de youtube como pagina principal, y a la vez un boton de entrar en la pagina con javascript, pero al darle a "antrar en la pagina" se va todo, menos la mancha que dejo marcada!

No se si tengo alguna secuencia mal puesta. He dejado el display como none, pero aun asi no funciona:

Código Javascript:

<script type='text/javascript'>
        $("#entrar").click(function(){
            $(".videoprincipal").css({'display':'none'});
            $(this).css({'display':'none'});
        }); 
</script>
 
</head>
<script type='text/javascript'>
var w = screen.width;//$(window).width();//screen.width;
var h = $(window).height();//screen.height;
if (getCookie('shadowboxVideo') != ''){
    setCookie('shadowboxVideo','','sesion');
    $("body").append('<div class="videoprincipal" style="z-index:10;background-color:#000000;width:100%;height:90%;position:absolute;">'+
        '<iframe width="560" height="315" src="http://www.youtube.com/video" frameborder="0" allowfullscreen></iframe>'+
    '</div>'+
        '<div style="background-color: rgb(199, 200, 194); opacity: 0.9; position: absolute; z-index: 3; bottom: 0px; width: 100%; height: 10%; border-radius: 3px 3px 3px 3px;">'+//<--- Esta es la mancha, que a su vez es el fondo del boton "Entarr en la pagina" y no se va!
        '<div style="text-align:center;">'+
            '<a href="javascript:void(0);" id="entrar" style="border-radius:5px;padding-top:5px;color:#FFFFFF;background-color:#000000;width:120px;height:13px;padding:10px;border:none;">Entrar en la página</a>'+
        '</div>'+
    '</div>');
}
 

Muchas gracias.