-
Posts
-
For the life of me I cannot figure out how to get LayerSlider to open embedded video (using an iframe) to show up in a popover.
This use to work perfectly with the old version of LayerSlider but since it’s been updated it just keeps opening the videos in the main window.
What I’m doing is choosing ‘Image’ as the layer type then specifying the image of a PLAY button.
I then switch over to the ‘Link’ tab and enter in the embed popover URL into the field and set it to ‘Open on same page’.
http://fast.wistia.net/embed/iframe/k15tf84uzl?videoWidth=640&videoHeight=388&controlsVisibleOnLoad=false&autoPlay=true
Additionally if I used a fancybox plugin, I would add the class ‘fancybox-iframe’ into the ‘Attributes’ tab.In the old version of the Enfold theme with LayerSlider, it could detect the source of the video (Youtube etc) and allow it to load as a popover video.
I’m currently using a video from Wistia. I’ve tried a Youtube hosted video but it too doesn’t open in a popover now either.
The only way that I could get it to work is choosing the ‘HTML / Video / Audio’ layer type and entering in the following html code:<a href="//fast.wistia.net/embed/iframe/k15tf84uzl?popover=true"><img src="https://embed-ssl.wistia.com/deliveries/07b5e1d983243191d31e6f4f47ca8dfa7fcdb75d.jpg?image_play_button=true&image_play_button_color=0212e3e0&image_crop_resized=150x84" alt="" /></a> <script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/popover-v1.js"</ script>But I don’t like having to do this because the thumbnail/preview image does not actually resize itself when you alter the window size of the browser, so everything around it is reduced except for the video play button.
Can you please help figure out how to get this working like it was before?
Part of the problem is that there is no way to add a class or ID to the
<a>tag when you specify the URL for the image (from the LINK tab).My web developer was able to track down where to add the ID by digging through the source files of the LayerSlider.
This is where we found it
themes\enfold\config-layerslider\LayerSlider\includes\slider_markup_html.php// HTML attributes $level = isset($layer['props']['level']) ? $layer['props']['level'] : ''; $el->addClass('ls-l'.$level); if(!empty($layer['props']['id'])) { $inner->attr('id', $layer['props']['id']); } if(!empty($layer['props']['class'])) { $inner->addClass($layer['props']['class']); } if(!empty($layer['props']['url'])) { if(!empty($layer['props']['rel'])) { $el->attr('rel', $layer['props']['rel']); } if(!empty($layer['props']['title'])) { $el->attr('title', $layer['props']['title']); } } else { if(!empty($layer['props']['title'])) { $inner->attr('title', $layer['props']['title']); } }And this is what we’ve had to change
// HTML attributes $level = isset($layer['props']['level']) ? $layer['props']['level'] : ''; if($layer['props']['id'] == 'wistia'){ $el->addClass('ls-l fancybox-iframe'.$level); } else { $el->addClass('ls-l'.$level); } if(!empty($layer['props']['id'])) { $inner->attr('id', $layer['props']['id']); }Is there another way to do this other than modifying the source code, so that when we update the theme it doesn’t break it?
- The topic ‘LayerSlider WP not opening embedded videos as popover’ is closed to new replies.