Docs

[John]

Hey gang,

I have a functionality questions is there a way to do pop-overs (Like the ones you get with convertPlug) that have video in them, so take a look:

http://prntscr.com/cg1yac

Something like that?

I would prefer to go inhouse and use X elements and approved X plugins in the execution.

Thanks for the help X team!

[Friech]

Hi There,

Thanks for writing in! I did just reply to a ticket that is something like this. Please follow this post.

Here’s a sample code for a button-lightbox. You can paste that on a RAW content element.

[x_button type="real" shape="square" size="regular" href="https://www.youtube.com/embed/8fTIxv_i54c" title="Example" class="lbx"][x_icon type="play-circle"]PLAY ME![/x_button]
[lightbox selector=".lbx"]

Let us know how it goes.

Cheers!

[John]

Thanks for the assist!

[Friech]

We’re delighted to assist you with this.

Cheers!

[John]

Ok after playing around with this its really close to what I’m looking for is there a way to make the video come up not as big; so it’s only taking up a portion of the screen (it would be centered) and you could still see the sight in the background?

I tired the following CSS edit but its not doing it:

.ilightbox-overlay {
    height: 50% !important;
    width: 50% !important;
}

Thanks for the continued help!

[Christian]

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[John]

Here your go:
http://www.purposefulmarketinggroup.com/video-popover-demo/

[Rupok]

Hi there,

Thanks for the URL. Here is what I am seeing – http://recordit.co/qimK6fGOn2

So it’s big and fullscreen on my end. Are you seeing same? Would you clarify what you are trying to achieve?

Let us know.

[John]

Ok so what I’m looking for is something similar to the pop-over that are used on my home page:

Lansing Website Design

There about 1/2 way down:
http://prntscr.com/ci0bph

Clicking on these buttons and images brings up a convetPlug opt-in like pop over window, take a look:

http://prntscr.com/ci0aqx

I would like to do that but with a video in there and buttons / form fields for them to opt-in or re link to another page. I hope that makes sense

John

[Paul R]

Hi John,

You’ll need to kind of set this one up manually, but something like the following would give you what you’re after:

<div id="my-content">
  ...content here - video and form...
</div>

<a href="#my-content" class="lightbox-selector" data-type="inline">Click Me</a>

[lightbox selector=".lightbox-selector"]

So you’ll need to make sure to add a unique ID to the content you want to open up in the lightbox, then have a clickable link use that ID in the href attribute. You’ll also need to add a unique selector to the link via a class, which you’ll use with the [lightbox] shortcode.

Thanks!

[John]

Ok so following up on this, and I feel like I’m almost there.

made a raw code block and added:
– the video element
– the form element

so it looks like this:

<div id="my-content">
[x_video_player type="16:9" src="http://www.full-engagement-experience.com/wp-content/uploads/video/video_example_000.mp4" hide_controls="false" autoplay="false" no_container="false" preload="none" advanced_controls="true" muted="false" loop="false" poster="http://www.purposefulmarketinggroup.com/wp-content/uploads/2016/09/placeholder.jpg"]
[contact-form-7 id="6" title="Contact form 1"]
</div>

<a href="#my-content" class="lightbox-selector" data-type="inline">Click Me</a>

[lightbox selector=".lightbox-selector"]

But with the whole light box thing the the light-box selector and the right styles in there I’m getting a bit confused; can you help give me a little extra nudge over the goal line on this one; thanks!

John

[Christopher]

Hi there,

The lightbox is displaying fine on my end, please see the attachment.
Please clear cache and check again.

Thanks.

[John]

Ok I think you might have drilled into the wrong thing so, what I’m trying to do is build a X button that when you click it it pulls up a video that auto plays and then there is a form underneath for the visitor to take action.

I’ve been trying to hand build on on the following page:
http://www.purposefulmarketinggroup.com/video-popover-demo/

There are a few problems that I’m running into at this point:

1) I can get it working with a link not a X button
2) The video is not auto playing; when I attempt to set the video to auto play in the movie short code the movie starts playing right away on page load. Now I’m not a JavaScript all star so I think there might be a way around that with an .onload kind of deal. Cause right now I have a div that is set to display:none; and that’s what making it show up when clicked.

Take a look:

<div id="my-content" style="display:none;">
[x_video_player type="16:9" src="http://www.full-engagement-experience.com/wp-content/uploads/video/video_example_000.mp4" hide_controls="false" autoplay="false" no_container="false" preload="none" advanced_controls="true" muted="false" loop="false" poster="http://www.purposefulmarketinggroup.com/wp-content/uploads/2016/09/placeholder.jpg"]

[contact-form-7 id="6" title="Lightbox form"]
</div>

[x_button size="global" block="false" circle="false" icon_only="false" href="#my-content" title="Click here to play the video popup" target="" info="none" info_place="top" info_trigger="hover" info_content="" id="" class="lightbox-selector"][x_icon type="play" class="mvn mln mrs"]X button that plays lightbox movie[/x_button]

[gap size="25px"]

<h1 class="man"><a href="#my-content" class="lightbox-selector" data-type="inline">Hyperlink that plays displays movie</a></h1>

[lightbox selector=".lightbox-selector"]

And finally 3) when the movie is clicked on in the lightbox I can hear it playing but the video is not visibly moving; instead all I’m seeing is the video poster image stay up there.

Thanks for the continued help!
John

[Rad]

Hi there,

1. Would you mind providing a sample page showing X’s button not working with the lightbox? If you’re referring to “Show” button on your provided URL, then it’s not X’s button. It’s just a normal HTML button. And lightbox will only work on links, not on standard HTML button.

2. How about this, please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery( function( $ ){

$(document).ready( function() {

$('#my-content .x-video video').get(0).pause();

$('.lightbox-selector').on('click', function() {

$('#my-content .x-video').css({display: 'block'});

$('#my-content .x-video video').get(1).play();

} );

} );

} );

3. Should be fixed by the line $('#my-content .x-video').css({display: 'block'}); from the above code.

Thanks!

[Author]

Posts