How do I open and play video in a modal dialog box?

modal video

- 10 years, 1 month ago imsam67
 Participant
 
 Expired
 
 I want to play a video in a modal dialog box on my site. I’d like to put a screen shot of the video on the slider on the home page and place a play button. When the user clicks the button, I want to open a modal dialog box and play the video in there.
 
 Support tells me that Specular does not support modal dialogs. I do however see modal dialogs on Specular — I think it’s the PrettyPhoto plugin. I’d appreciate any advice on how I can open up and play a video in a modal on my home page.
 
 Thank you
- 10 years ago Mirela
 Participant
 
 Hello,
 
 You can achieve this by adding a lightbox shortcode inside a Text Block in Visual Composer.
 
 Best regards!
- 10 years ago imsam67
 Participant
 
 Expired
 
 And where would I find that lightbox shortcode? I’m looking under shortcodes in your documentation and I don’t see a reference to lightbox shortcodes.
- 10 years ago Mirela
 Participant
 
 Hello,
 
 You can add it from any page’s text editor. Screenshot.
 
 Best regards!
- 10 years ago imsam67
 Participant
 
 Expired
 I’m not really clear about this.
 
 The idea is to open a lightbox that will play a video when user clicks the button that is on a slide on the home page.
 
 So, when I edit the slide, I see the following but I’m not sure where I can insert the lightbox code.
 
 This reply was modified 10 years ago by imsam67.
- 10 years ago Mirela
 Participant
 Hello,
 
 Sorry but you mentioned only the home page, not home slider. However, to enable the modal video in codeless slider, do the following:
 -Go to file includes/codelessslider/codeless_slider.php and find this line:
 
 if(!empty($cl_redata['slide_button1'])) $output .= '<a class="btn-bt '.esc_attr($cl_redata['overall_button_style'][0]).' '.esc_attr($cl_redata['slide_button1_style']).'" href="'.esc_url($cl_redata['slide_button1_link']).'">'.$cl_redata['slide_button1'].'</a>';
 
 and replace with this:
 
 if(!empty($cl_redata['slide_button1'])) $output .= '<a class="btn-bt lightbox-media '.esc_attr($cl_redata['overall_button_style'][0]).' '.esc_attr($cl_redata['slide_button1_style']).'" href="'.esc_url($cl_redata['slide_button1_link']).'">'.$cl_redata['slide_button1'].'</a>';
 
 – Now go to Codeless slider > Slider Options > Content, in the Button link add a simple video link (screenshot)
 
 Best regards!
- 10 years ago imsam67
 Participant
 
 Expired
 I followed your instructions. I was able to link the video to the button but it is NOT opening it in LightBox. It simply takes the browser to the URL. I have to click the “BACK” button to go back to my site.
 
 Does the video have to be a YouTube video? It’s my own MP4 video that is in my Amazon S3 bucket.
 
 This reply was modified 10 years ago by imsam67.
- 10 years ago imsam67
 Participant
 
 Expired
 
 This issue is not yet resolved.
- 10 years ago Mirela
 Participant
 Hello,
 
 This is a tested solution. It’s the lightbox-media class that makes the link open in modal box. If this class is missing, it will open link in new tab. Please make sure you have followed the instruction properly and did not make any mistake.
 If still do not succeed, please send us your wp and ftp credentials in a private reply. So we can do it for you.
 
 Best regards!
 
 This reply was modified 10 years ago by Mirela.
- 10 years ago imsam67
 Participant
 
 Expired
 
 This reply has been marked as private.
- 10 years ago imsam67
 Participant
 
 Expired
 
 I sent you the WP and FTP credentials via private message as you requested. Any updates?
- 10 years ago Mirela
 Participant
 
 Hello,
 
 Sorry for the late reply.
 Please use youtube links. The link you have is not supported.
 
 Best regards!