How to Add Music to Elementor Background Video on Autoplay

element.how/elementor-video-b...
Contact us for website or marketing help: symphonyadvertising.com

[@saeedmohsen1482]

you are the best thanks alot ♥♥♥

[@VICENTXIII]

You are the greatest man thanks

[@jacobwonder6735]

Exactly what I needed! Thank you so much for your video.

[@jacobwonder6735]

Not working on mobile if I clone the section. :/

[@itscesargil]

@@jacobwonder6735 Hi! Can you specify what's not working?

[@jacobwonder6735]

​@@itscesargil Thanks for replying! If I set it up to it working, clone it, set the first to be desktop only, and the second mobile only, the button does NOT work on mobile. I suspect the classes being the same might be the issue.

[@jacobwonder6735]

@@itscesargil Basically I need to rewrite the JS with different class names, so that's what I have to figure out! Ha.
I am unsure how toggle_sound is in the JS

[@jacobwonder6735]

@@itscesargil Solved it! toggle_sound does nothing, the icon does NOT need a class.
The JS identifies the button by the class the mute icon ads.
So to solve for that, I simply need to change the icon the mobile only section sees, and put the new class in the OG code. I just duplicated it.
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');
} }); });
document.addEventListener('DOMContentLoaded', function() {
var toggleSoundButton = document.querySelector('.fa-volume-off');
var heroBackgroundVideo2 = document.querySelector('.herosection2 video');
toggleSoundButton.addEventListener('click', function (event) {
if (heroBackgroundVideo2.muted !== false){
heroBackgroundVideo2.muted=false;
toggleSoundButton.classList.add('fa-volume-up');
} else {
heroBackgroundVideo2.muted=true;
toggleSoundButton.classList.remove('fa-volume-up');
} }); });

[@user-hp7lm9bo7s]

Great video, I just did everything all works perfect, but when I duplicated the section for mobile and dropped in my mobile resized video the volume button stopped working on the desktop video. Did you make two sections with two different sets of codes for mobile and desktop? Or did you use one video for both?

[@itscesargil]

I believe it's just one video/section. It's been a while lol. But if you are having issues with mobile then yes I would try creating a specific version for mobile

[@dorcasukueje945]

I'm having the same issue. Please where you able to find a solution for it?

[@hichmaz1241]

where to put the HTML code please?
Thks

[@JaswinderSingh-zq3jw]

Where we can put that code please help me.

[@creatrixarena3113]

can some pls tell me how to change the hover effect to volume on while clicking. Please help

[@ehsanalee8008]

Hey great video, I have followed all as you did. but still, confusion where to add that javascript code?

[@takaruangdesign1406]

do you get the answer already? i kind of hard too, please give me some advice

[@HuyPham-qi9up]

help me. it not working

[@muhammadmridulhosenkibria9934]

this video is not working

[@BeautyTipsforgirls3]

there is not sound on background? for what i was looking for

[@itscesargil]

how may i be of assistance ?

[@BeautyTipsforgirls3]

@@itscesargil i wanted to ask where t put the Java code its the confusing thing for me

[@itscesargil]

@@BeautyTipsforgirls3 I see! I believe there has been several elementor updates made so unfortaintely the video isn't exactly the same steps as it once was

[@jyljeanne2937]

not working dommage 🤷

[@itscesargil]

dang. it use to work lol. elementor has had a lot of updates since this video, unfortunately

[@hayagoldberg3525]

@@itscesargil worked for me