Q:

Javascript onclick events for playing/pausing a video not working

In my web page I have embedded background music and a background video (webm format). I am trying to make play/pause button images (png) work for both the video and the music, however, both do not work. 
I have added the background music via embed and with id music:
<embed src="resources/bgsound.mp3" autostart="true" loop="true" hidden="true" id="music">

I do not want to use the UI, simply because of the design and I want to keep using the two buttons, which are images in .png format.
The video I have added in the following way: 
<video playsinline autoplay muted loop poster="resources/csgotrailer.png" id="bgvid">
<source src="resources/csgotrailer.webm" type="video/webm">
</video>

And these are the images, that are supposed to work as buttons:
<img src="images/play.png" alt="Play" height="30" width="30" id="play">
<img src="images/pause.png" alt="Pause" height="30" width="30" id="pause">

(with two respective IDs). This is the CSS of the two images, not that it matters (or so I believe):
#play {
    position: fixed;
    top: 5%;
    left: 5%;
    opacity: 0.175;
}
#pause {
    position: fixed;
    top: 5%;
    left: 9%;
    opacity: 0.175;
}

I want both the video and the music to pause whenever I click the #pause button, and for both of them to play again whenever I click the #play button.
I tried a lot of times with different corrections over my javascript:
var vid = document.getElementById("bgvid"),
pauseButton = document.getElementById("pause"),
playButton = document.getElementById("play"),
mus = document.getElementById("music");

playButton.addEventListener("click", function(event) {
    if (vid.paused == false && mus.paused == false)
        return;
    else {
        vid.play();
        mus.play();
    }
});

pauseButton.addEventListener("click", function(event) {
    if (vid.paused == true && mus.paused == true)
        return;
    else {
        vid.pause();
        mus.pause();
    }
});

I am getting no errors/warnings whatsoever in my browser's console and also nothing happens when I click on the buttons. I have defined it in the index.html:
<script src="assets/js/buttons.js"></script>

Yes, it is in the right folder, as all other javascripts are there and they are working fine. I've put this after all others. I noticed that if I put it before the others, some of them stop loading and spit out errors.
Any idea what could it be?
Thank you in advance.

A:

After experimenting for quite some time and also thanks to @RoryMcCrossan who commented, I've been able to solve the issue. 
I added z-index to the ids of the buttons, because as I had doubts, they couldn't be clicked as they were below other objects:
#play {
    position: fixed;
    top: 5%;
    left: 5%;
    opacity: 0.175;
    z-index: 1000;
}
#pause {
    position: fixed;
    top: 5%;
    left: 9%;
    opacity: 0.175;
    z-index: 1000;
}

After doing that, the issue got solved in half. The video could be paused, but the music not. I opened the console, no errors, however, in sources -> my js file I saw that the functions removeAttribute and stop() for the music were not working. I read up a little and understood that embeds do not have the same properties as the background video, nor as audio. So I just resolved to giving up the <embed> and replaced it with <audio>:
<audio src="resources/bgsound.mp3" id="music" autoplay></audio>

That solved everything and the buttons work perfectly fine now. Both pause and play.

