javascript - content - Alternar la propiedad de visibilidad de div

modificar dom javascript

Question

Tengo un video HTML 5 en un div. Luego tengo un botón de reproducción personalizado, que funciona bien.
Y tengo la visibilidad del video configurada como oculta en la carga y visible cuando se hace clic en el botón Reproducir, ¿cómo lo devuelvo a oculto cuando se hace clic en el botón reproducir nuevamente?

function showVid() {
document.getElementById(''video-over'').style.visibility = ''visible'';
}

#video-over {
visibility: hidden;
background-color: rgba(0, 0, 0, .7)
}

<div id="video-over">
<video class="home-banner" id="video" controls="">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type=''video/mp4'' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type=''video/webm'' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type=''video/ogg'' />
</video>
</div>
<button type="button" id="play-pause" onclick="showVid();">
<img class="img-home-apply" src="/wp-content/images/apply-pic.png" alt="Apply Now">
</button>

Básicamente estoy tratando de alternar entre los dos estados de visible y oculto, excepto que no puedo usar el botón de alternar porque ese programa oculta el div. Lo necesito allí, solo oculto, por lo que mantiene la altura correcta.

Answer 1

Hay otra forma de hacerlo con solo JavaScript. Todo lo que tiene que hacer es alternar la visibilidad en función del estado actual de visibilidad del DIV en CSS.

Ejemplo:

function toggleVideo() {
var e = document.getElementById(''video-over'');
if(e.style.visibility == ''visible'') {
e.style.visibility = ''hidden'';
} else if(e.style.visibility == ''hidden'') {
e.style.visibility = ''visible'';
}
}

Answer 2

Sé que esta es una vieja pregunta, pero me encontré investigando un problema diferente.

De acuerdo con los documentos de jquery, llamar a toggle () sin parámetros alternará la visibilidad.

 $(''#play-pause'').click(function(){
$(''#video-over'').toggle();
});

http://jsfiddle.net/Q47ya/

Answer 3

Usando jQuery:

$(''#play-pause'').click(function(){
if ( $(''#video-over'').css(''visibility'') == ''hidden'' )
$(''#video-over'').css(''visibility'',''visible'');
else
$(''#video-over'').css(''visibility'',''hidden'');
});