Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 10, 2014 at 1:33 am #333561
    Perenso

    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?

    • This topic was modified 10 years, 2 months ago by Perenso. Reason: Added code tags in
    October 10, 2014 at 6:34 am #333676
    Perenso

    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?

    • This reply was modified 10 years, 2 months ago by Perenso.
    October 12, 2014 at 5:15 am #334436
    Josue

    Hey!

    Try the following – http://screencast.com/t/nkXM1ZOKnqb

    Cheers!
    Josue

    October 13, 2014 at 12:51 am #334581
    Perenso

    It worked! Thanks Josue, you are a legend!

    This can be closed now.

    October 13, 2014 at 1:56 am #334583
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘LayerSlider WP not opening embedded videos as popover’ is closed to new replies.