-
AuthorPosts
-
March 18, 2016 at 12:28 am #600006
Hi guys,
I’m trying to set up a link within the Advanced Layer slider, so that the image of a video play button can be clicked and then a YouTube video is launched in a fullscreen lightbox, like at the top of this site: https://jessijohnson.ca/ Please check it to see what I mean.
I originally set our Layer Slider up with a Vimeo video and it seemed to pop-up fine, although we couldn’t set it to go fullscreen…thus why we switched to YouTube as I thought this wouldn’t be an issue.
Any ideas here?
I’ll provide you my dev site link and login below so you can maybe take a closer look and see if this is easily possible?
Thanks so much, as always.
DMarch 18, 2016 at 12:31 am #600007Actually you can see in the private link below how the Vimeo link is working just fine on our page. Please see what I mean. We just can’t set it to be full screen.
Thx again guys,
DMarch 18, 2016 at 5:04 am #600066Hi!
I would prefer Youtube as it allows you to modify the way the video looks.
When you add the youtube video you need to add some parameters to the URL which will change the look of the video
https://www.youtube.com/watch?v=7Ya71Vtkccc?&controls=0&modestbranding=0&autoplay=1&rel=0&showinfo=0&hd=1&autohide=1&color=white in the above URL On = 1 and Off = 0 the rest of them are parameters allowed by google controls=0 modestbranding=0 autoplay=1 rel=0 showinfo=0 hd=1 autohide=1 color=white
Use this link to build your own URL http://www.vtubetools.com/ then modify it without the iframe as showin int he above link.
For more details please ref to https://developers.google.com/youtube/player_parameters
Add the below css in Quick CSS to make the lightbox video larger or fullscreen adjust the height and width
/* Lightbox Large Video */ .mfp-iframe-holder .mfp-content { width: 100%; max-width: 70%!important; }
Fullscreen
/* Lightbox fullscreen Video */ .mfp-iframe-holder .mfp-content { width: 100vw!important; height: 100vh!important; }
Regards,
Vinay KashyapMarch 18, 2016 at 7:30 am #600127Fantastic. Thank you!
I’ve got it connected now. Please take a look.
I do need to be able to have an “X” in a corner somewhere in order for visitors to close the video out if they don’t want to watch it. Is this possible with some sort of parameter? I didn’t see anything on this page but maybe I missed it: https://developers.google.com/youtube/player_parameters
Any ideas? Thanks again!
DMarch 18, 2016 at 10:05 am #600173Hi!
When I saw last time the video opened in a lightbox. Right now when you click on the video icon users are sent to youtube site… so you cannot get the “X” or the close icon. Please revert it back so that when the video icon is clicked it opens in a lightbox then we can target the close icon to show in fullscreen.
Right now you are using layerslider and icon as an image instead you can use a color section and icon inside it.
To position close button please use the following CSS
/*Close button position*/ div.avia-popup .mfp-iframe-scaler .mfp-close { top: 0!important; right: 0!important; }
Regards,
Vinay KashyapMarch 18, 2016 at 8:05 pm #600529I actually didn’t change anything from the way it was setup with Vimeo. I believe that “x” function is just built into the Vimeo link. I’ve attached that link below as I have it in the Layer Slider, so you can see. I’ve also put the Youtube code I was using for fullscreen in there. As well, there is a screenshot of what it looks like on the Layer Slider back end. I have it set to “open on the same page” but have also tried all other options (“open in new page”, “open in parent frame” and “open in main frame” ) with no different results there either.
I’ve added the “close button position” CSS code you provided above as well, but obviously with no results as of yet.
Do you want to take a look in the back side of site with login credentials provided above?
Thanks so much for your help. :)
March 20, 2016 at 10:57 pm #600907Hi guys,
Sorry to bug. Any chance to look at my last reply above yet?
Thanks so much for your time!D
March 24, 2016 at 3:35 am #602864Hi!
Use the “Text” layer then add the link tag. We added it for you:
<a href="https://vimeo.com/157345136" class="lightbox"><img src="http://devsite1.digitalanddesign.ca/wp-content/uploads/2016/03/play_button-e1457640189961.png"></a>
The theme will automatically detect the vimeo link and open it in the a lightbox.
Cheers!
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.