Stop YouTube/Vimeo Video Playback When Switching Slides in Hero Slider

Problem/Motivation

When navigating between slides in the Hero Slider, embedded YouTube or Vimeo videos from the previous slide continue to play in the background.

This causes overlapping audio and unnecessary resource usage, negatively impacting both accessibility and performance.

Steps to reproduce

1. Visit a page (e.g., Homepage) containing the Hero Slider component.
2. Add one or more slides using Remote Video (YouTube or Vimeo).
3. Play the video in one slide.
4. Navigate to the next slide.
5. Observe that the previous video continues playing even though it’s no longer visible.

Proposed resolution

1. Pass the correct base path and theme path to the embedded oEmbed frame.
2. Improve the oembed-frame JavaScript logic to automatically:
   • Pause or stop videos when the slide is hidden.
   • Resume or autoplay only the active slide if applicable.
3. Ensure compatibility with both YouTube and Vimeo APIs.
4. Test with multiple slides and transitions (manual and autoplay).

Remaining tasks

• ✅ File an issue about this project
• ✅ Addition/Change/Update/Fix to this project
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Update Release Notes and Update Helper on new feature change/addition
• ✅ Release varbase-10.1.0-beta1, vartheme_bs5-4.0.0-beta3

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• [#3553800] fix: Stop YouTube/Vimeo Video Playback When Switching Slides in Hero Slider