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. el 7 nov. 2017 a las 9:10

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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