I am currently making some kind of a banner for our home page.
The banner is built in Elementor using Elementor’s widgets.
It is based on TABS, each tab is an HTML block that comes with background video from Vimeo.
In general, the banner works.
But I have noticed that when going to the next tab, the next video starts playing,
when going back to the previous tab, it’s bg video is stuck where I left and doesn’t play anymore.
I believe that they play onload, and coming back to previous tabs doesnt force it to play.
Unfortunately, since it is wordpress and Elementor, I couldn’t add attributes to each tab, It lacks the feature.
How can I try and add a script that would force the video to play each time I swap a tab?
the iframe of one of the videos under one of the tabs
the tablinks list itself
both cases, the active tab link and active tab content get a class .wd-active
maybe it would be a nice way to try and make it work.
I have not tried anything yet, I have a very very basic knowledge.
I did think of adding an attribute to each Tab “wd-nav-tabs” link, adding an ID to each video based on the same attribute [ let’s say first Tab is tn-1, so video is ‘banner-vid-1’ ] and then trying to force it to play the video with something like ‘play video+ tn value’.
But I cannot add attributes to the tab links themselves in Elementor.
So I am kind of looking for any tip to make it work.
I hope I gave enough information, it is all I am able to give unfortunately.