У меня есть видео HTML 5 в div. Затем у меня есть пользовательская кнопка воспроизведения - это прекрасно работает.
И у меня видимость видео установлена скрытой при загрузке и видимой при нажатии кнопки воспроизведения, как мне вернуть ее скрытой при повторном нажатии кнопки воспроизведения?
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>