Accordion with multiple shortcode video lightboxes on single page

Support
#1

Using shortcodes within accordion to create a video lightbox from image and everything worked fine with a single instance. When all the instances are using the “videoLightbox” class, everything works but the videos all show and play at the same time. But if I try to make each class unique to each video lightbox, it just breaks the whole setup.

This is the development link with the accordion halfway down the page.

Tried using some old references in the Forum, but all yield the same result of none of the multiple video lightboexes working.

#2

Hi @MLTCreative,

Thanks for reaching out.
It is not very clear how you have used the Lightbox? I would suggest you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

secure-note
secure-note1040×250 15.3 KB

Alternatively, you can try by using the Modal element with the Image option in place of the burger icon.

Thanks

#3

Hello @MLTCreative,

Thanks for sharing the login details I went ahead checked your site dashboard, I notice that there is a JS console error. It might be due to plugin conflict or JS customization issues.

I checked the shortcode that you are using it is working fine at my local test site. I would suggest you troubleshoot with a few of the common issues before we investigate your settings.

  1. Testing for Plugin Conflict
  2. CSS/JS Customization
  3. Version Compatibility
  4. Disabling Cache
  5. Child Theme

If it doesn’t work for you, I would suggest you please purge all the cache. I would suggest you follow these steps.

  1. Activate the default theme of WordPress and deactivate the Pro theme
  2. Delete the Pro theme
  3. Download the fresh copy of the Pro theme from the Themeco account dashboard
  4. Reinstall the Pro theme

If it doesn’t work for you, please share your FTP details in the secure note.

Thanks

#4

Tried all your suggestions:

  • Turned all the plugins off and cleared the cache
  • Verified versions and everything exceeds X/Pro requirements
  • Disabled cache
  • Already running a child theme
  • Reinstalled Pro

The only JS Customization at the theme level is the following, which I found of the Themeco forum:

(function($) {
$(’.x-logobar’).prependTo(’.x-navbar’);
$(’.x-topbar’).prependTo(’.x-navbar’);
})(jQuery);

But nothing helped address the issue of putting more than one lightbox shortcode on a page, breaks it to the point it throws the errors you are showing in your screenshot.

The FTP information has been added to the secure note from before.

#5

Hi @MLTCreative,

It seems that you are using the Responsive Lightbox shortcodes and added the shortcodes multiple times. I have saved the content as a Template and created a Test page with the same content and removed all the lightbox shortcode except the first one and changed the image shortcode class to video-1 and now the lightbox is working fine. Please find the test page URL below.

But I still suggest you use the Modal, I have created a Test Section at bottom of the Test page for example.

Hope it helps.
Thanks

1 Like
#6

So it looks like the ability of assigning a different class to each lightbox is no longer functional in X Theme/Pro? Which means not being able to autoplay videos when they launch in the lightbox, since the setup you show loads all the videos at once.

Also, how will the Modal work inside of an accordion?

Should we stop trying to use shortcodes all together in X Theme/Pro? Really was one of the reasons we liked using the theme for multiple clients, but it seems like the theme direction is going away from shortcodes which is limiting the usability for more complex layouts in my opinion.

#7

Hi @MLTCreative,

If you check the test page which I have created it autoplay the video while launching the lightbox by clicking into individual images. And the Modal can be added into the Global Blocks which can be used as a shortcode into the Accordion.
I would suggest you go through the following article on how to create the Global Blocks and how can be used as a shortcode.


You can still use the Legacy Shortcodes if you want, the elements are using the shortcodes in behind. And the elements are many users friendly, easy to use and the available options can be set through the Page Builder.

Thanks

#8

I will look into the Modal option with Global Blocks, but it is not as clean looking as the lightbox. So I am thinking it may require more styling.

Also, when I view your test page on my end all the videos autoplay at the same time. You can pause one but the others are still playing in the background.

#9

Implemented the Modal setup as you suggested on a duplication of the first accordion item on your test page, so it is the second “Large Character InkJet Printer”.

So that works, but how do I set the YouTube embed code to only autoplay when the modal opens and stop when it closes?

Currently, it immediately starts playing as soon as the page loads.

#10

Hello @MLTCreative,

It is not advisable to set the videos to Autoplay when you insert them inside the modal popup. Regretfully what you are trying to do is not possible with the Modal + Video element. You will have to manually click the Play or Stop button of the video first before closing the modal. It may be possible with custom development which is beyond the scope of our support already. You may need to contact a 3rd party developer to do these customizations for you if you are not familiar with coding.

Thank you for your understanding.

#11

Thanks for the feedback. We will just stick with the Global Block solution using the Modal + Video combination and just remove the autoplay feature. Still not ideal but it is better than the Lightbox shortcodes, since it does seem to support different identifiers for multiple Lightbox elements on a page anymore.

#12

Hi @MLTCreative,

Glad to know that the Modal + Video combination is working for you.

Thanks

#13

On the Modal + Video combination, how do you get the video stop playing if someone closes the modal? Saw a lot of old post in the forums with an option in the Area Content Modal called Load / Reset on element toggle, but that option does not seem to be available anymore.

#14

Hi @MLTCreative,

Adding data-rvt-offscreen-reset in an element’s custom attributes will enable the behavior. The best place to add this would be on the Video element itself. The existing “Dynamic Rendering” has been updated to use this.

Cheers,

TikTok videos keep playing when closing a Modal Element
#16

This is how I added the code in the YouTube embed code, but it is not working.

<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/tG8ogmWQy9U?data-rvt-offscreen-reset&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
#17

I think I figured out where this should actually go, but it does not change that the video keeps playing after closing the modal.

I removed from the YouTube embed code and moved to Custom Attributes on the video element under the Customize section. Used Modal Reset in Name section and pasted the supplied code in the Value section. Saved and cleared the cache for the site and browser, but video keeps playing after closing the modal.

#18

Hey @MLTCreative,

It should look like this. If it doesn’t work still, try updating to Pro 5.1.0

image

Thanks.

#19

Thank you Christian! It is working now with the Pro update and supplied text moved to the Name field.

#20

Hi @MLTCreative,

Glad it is working now.

Thanks

#21

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.