Attempting to use a self hosted video background hero (in wordpress with elemnetor) that auto plays on load but with no sound as it should be muted for both ADA compliance and to be supported by certain web browsers.
I am wondering if it's possible to have a button/icon that unmutes the sound but also restarts the video at the same time so the 30 sec message and sound starts over from the beginning?
Problem:
I have it set up to auto play with no sound and added an icon using this technique and this code (https://elementorcodes.com/elementor-video-background-sound-button/) but how can I trigger a restart at the same time?
Code:
document.addEventListener('DOMContentLoaded', function() {
var toggleSoundButton = document.querySelector('.fa-volume-mute');
var heroBackgroundVideo = document.querySelector('.herosection video');
toggleSoundButton.addEventListener('click', function (event) {
if (heroBackgroundVideo.muted !== false){
heroBackgroundVideo.muted=false;
toggleSoundButton.classList.add('fa-volume-up');
} else {
heroBackgroundVideo.muted=true;
toggleSoundButton.classList.remove('fa-volume-up');
} }); });
</script>