1

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.

Chris Grim
  • 149
  • 1
  • 6
  • 20

1 Answers1

3

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;
}
<div style="padding: 30px 10px; width: 100%; background: gray; margin-bottom: 20px;" id="navbar">
Navbar
</div>

<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" id="video" controls width="400" />
Aditya R
  • 567
  • 4
  • 17
  • Thanks so much for the quick response! How does this work with iframes? Here is the page I am trying to hide the nav on. https://dev.kingandcountry.tv/shell-multi-me/ When I tried const videoEl = document.getElementById('iframe-player-2') videoEl.addEventListener('play', () => { console.log('video playing') }) videoEl.addEventListener('pause', () => { console.log('video not playing') }) ``` it didnt work – Chris Grim Feb 20 '21 at 02:51