Sign in to follow this  
Followers 0

Generating a lightbox with a video (or form, etc.) when clicking a 'button'

4 posts in this topic

I am trying without success to emulate the example in this site:

When you click on "Play Video", what is probably a lightbox opens in the center of the screen, without leaving the page, and... well, plays a video.

The idea is to use a component like Masthead (or maybe Hero) and enable the video so that clicking in the Masthead Action Button will trigger the lightbox. 

I thought I could use popup plugins like Simple Popup Plugin, using a shortcode. Didn´t work. 

I then tried Lightbox Plus Color Box, and after reading about it in a forum, JQuery Colorbox plugin. No success there either. 

Then, here - - I found a PageLines shortcode to insert YouTube and Vimeo videos, but inserting 


  1. [pl_video type="vimeo" id="50522981"]

in the link destination just opened the video inside the button itself. 

I couldn´t find any other reference to this problem in the forums.

Please help.


Share this post

Link to post
Share on other sites

Hi there, that site looks like it's using for the lightbox effect.


You wouldn't be able to trigger the video from the button inside the pre-set section. However if the section has a text field, like the highlight section, you could make your own button inside the text field using the shortcode the plugin provides to activate the video.

Share this post

Link to post
Share on other sites

Thank you, James.

Share this post

Link to post
Share on other sites

Thanks for informing us the issue has been resolved.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0

  • Similar Content

    • Masthead styling CSS port to HTML
      By bjs198
      Hey there,
      I use quite a few templates to handle the look and feel of many many pages on a site and then populate the templated pages with a wp-content loop. However a client has asked that I effectively place a DMS2 Masthead at the top of each page as they prefer the styling of the title & tagline to the standard in WP. Obviously I can't do this when using templates as the Masthead would just replicate over all the associated templated pages, so could you please tell me if it's possible to recreate the title and tagline styling of the Masthead using HTML rather than CSS in the text view of the wp-content editor? I did inspect the HTML/CSS but came up fruitless...
      Hope that makes some kind of sense, and please excuse my coding ignorance :)
    • How to link a masthead button to a place in the same page?
      By knasen81
      Hi! I want to link a button in the musthead så that when clicked it send the visitor to a lower position/place in the same page. It is clear how you can type a link in a button så that the person sends to another page, but how do you send them to a lower place in the same page?
    • Masthead Text Not resizing properly on mobile
      By MobileParity+
      My Masthead text is not formatting to mobile devices. It was working fine last week and once I added the ShareBar section everything got a little off. At first I thought it was the width of the ShareBar that was causing the issue so I used a media query to resize the width and it works for the tablet size of 767px however my Masthead text is now askew and does not resize for the screen. I am using FitText.js to resize the headings (h1, h2, etc). Here is the media query that I am using for the ShareBar. For some reason I am 
      @media only screen and (max-width:767px) {  #sharebarui2dj1f .pl-sharebar { width:540px;     } }  
      Framework Version:dms2
      WordPress Version:4+
      Plugins in Use:FitText.js
    • Masthead Issue - Video may be the cause of it
      By DanatTLFN
      Hello there!
      I'm a bit panicky this evening as I was just making a quick change to the top half of my page when the DMS decided to stop loading up.
      The steps I took before refreshing are as follows: 
      Added in a Masthead
      Embedded a YouTube Video into the Video field on the editing panel
      Began pulling hair out
      After this I went to troubleshoot it and have deactivated all plugins however the problem still persists with all plugins deactivated. I am pretty sure it is a something to do with the Masthead, however not being able to get in and remove that section, makes seeing a solution somewhat rather difficult.
      Anyway I shall look forward to hearing your response.
      PS. I am running DMS 2 
      GoDaddy hosting
      and 21 Plugins all of which I have mentioned in previous posts.
    • Add lightbox effect to manually added images
      By swiftitnz
      Hello people, I have been working on this site: and added few images for agent profiles manually.
      I was looking to use a plugin to get the lightbox functionality for thumbs > bigger images. Therefore, I installed 'Simple Lightbox' but it didn't work. Which is most likely because of clashing with DMS. Is it correct?
      Hence, I have used html/css (I have pasted below) and got the result but with a huge issue. If you kindly notice at the bottom of the site, there is a huge white space right below the footer/copyright module.
      Any suggestion on how to achieve the desired result without either of the issues?
      Any help is appreciated.
      <a class="thumbnail" href="#thumb"><img src="" width="200px" align="left"><span><img src="" /></span></a><span style="font-size: 150%; font-weight: bold;">Tenga Schieber<br>Team Realty of Atlanta</span><br><br><span style="font-size: 110%; font-weight: bold;"><a href=""></a></span> CSS: 
      .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 5; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: black; padding: 1px; left: -700px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 1px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; right: 0; /*position where enlarged image should offset horizontally */ }