Muted Volume in MediaElement.js when showing / hiding players

I’ve coded a script for the following web page:
https://tinyurl.com/5vrqjyh

That allows me to use the thumbnails on the right hand side in order to switch the ‘main video’.

All appears to work fine, however if you play one video and then switch to another, and then switch BACK to the video that was originally playing, then the volume is muted when you continue watching it.

I have noticed that you can get around it by clicking the volume tool inside the player, but the average user most likely won’t figure this out.

I’ve tried using the setVolume() method on something like:

$('#media video')

But FF tells me that the method doesn’t exist. Could this be because I’m just trying it from within one of my other js files whereas the media player script itself is setup with WordPress? I’m using the WP plugin you see.

Has anyone else had this issue?

Here is my .js that switches the videos if that helps:

[Code moderated as per the Forum Rules. Please use the pastebin]

Also another problem I’m having is in Internet Explorer (all versions). See above, where I said about switching from one video to another, in other browsers the videos automatically pause when you click on another thumbnail. However in IE the videos continue to play. So basically, you’d have to pause the video and THEN change main video by clicking one of the thumbnails. Again, not very user friendly.

Does anyone know of a way I can get it to function like in other browsers? I can see that even IE doesn’t have this problem on the following page where the Fancybox plugin is used:
https://tinyurl.com/5s9q6ov

So that makes me think there must be a way to solve it in IE on the home page.

If anyone has any advice on this too that would be great!

Thanks.