0

Buenas, tengo una página en la que al hacer click en un título de vídeo se abre un reproductor en el medio de la pantalla.
Adjunto foto:
introducir la descripción de la imagen aquí

Lo que no sé como hacer es para seleccionar todos los elementos que no sean este reproductor y hacer que se oscurezcan. Lo más parecido que he encontrado ha sido esto (sacado de otro hilo de Stack Overflow):

p.title:not(:first-of-type)

Pero no funciona para lo que quiero ya que no todos los elementos son p (ni ningún tipo parecido entre ellos) ni de la misma clase. He probado con esto pero solo se oscurece el reproductor:

$("#foto1").click(function(){
	$("#video1").fadeIn(1000);
	$("#x").show();
	$("iframe:not()").css("opacity","0.6");
});

Si necesitais más código decidlo en los comentarios, aunque creo que con eso será necesario, ya que solo es esa línea de código la que no consigo que funcione correctamente.
Saludos.

1 respuesta 1

1

Lo que yo haría, que es sencillo y funciona como quieras y no cambia tu modelo de pagina, es lo siguiente:

  • Un div con position fixed, ancho y alto al 100%, que ocupe toda la página y tenga un z-index mucho mayor que todos los elementos de la página (menos el video), que sea un color negro con un valor alpha: rgba(0,0,0,0.6), y un display none.

  • este div le pone al principio de tu código y al hacer clic en un titulo y abrirse el video, a la vez haces display block sobre dicho div, con lo cual todo se oscurecera y no podrás hacer clic en los elementos que no sean el video.

  • Cuando hagas clic en dicho div, que el video se minimice, el div se oculte y la web vuelva a la normalidad.

Espero que se haya entendido, pongo ejemplo:

Javascript para sacar el video y el fondo negro

$("#foto1").click(function(){
    $("#video1").fadeIn(1000);
    $("#div_negro").show();
});

HTML del div en cuestion

<div id="div_negro"></div>

CSS del div

#div_negro{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9000;
    display: none;
}

Ajuste CSS para los videos (para que se vea siempre encima del div negro)

.clase_que_tenga_el_video{
    z-index: 9999; /* para que este siempre encima del div negro */
}

Javascript para ocultar el video haciendo clic en cualquier parte del div negro

$("#div_negro").click(function(){
    //Esto oculta cualquier video, para que el div_negro funcione con 
    //cualquiera
    $(".clase_que_tenga_el_video").fadeOut(1000);
    $("#div_negro").hide();
});
1
  • Muchas gracias funciona perfecto. No se me habría ocurrido nunca. Commented el 7 nov. 2017 a las 9:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.