Hide Nav When Video is playing with js

Question

I have a client who built their site with wpbakery and on their posts are using video player. They want to have it so when the video plays the nav bar disappears. In the inspector I can see that the player has a class of 'video-container' and when the video is playing there is an addition class of 'playing'. I am hoping to check for if video-container has playing then add a class to my nav.

var hideNav = document.getElementsByClassName('video-container playing');
if (hideNav) {
    document.getElementByClassName("nav").className = "hidden";
}

I am guessing I need to add an event listener and I am not sure if my hideNav variable is working how I want it to.

user_6412600 · Answer

Here's an answer that doesn't use jQuery:

const videoEl = document.getElementById('video')
const navbarEl = document.getElementById('navbar')

videoEl.addEventListener('play', () => {
  navbarEl.classList.add('hidden')
})

videoEl.addEventListener('pause', () => {
  navbarEl.classList.remove('hidden')
})

.hidden {
  display: none;
}


Navbar

Hide Nav When Video is playing with js

1 Answers