BlueOwlCreative » Topic: How to create Video Popup (lightbox) links? https://blueowlcreative.com/support_wp/forums/topic/how-to-create-video-popup-lightbox-links/feed/ Fri, 21 Aug 2026 01:18:35 +0000 http://bbpress.org/?v=2.5.3-5249 en-US https://blueowlcreative.com/support_wp/forums/topic/how-to-create-video-popup-lightbox-links/#post-31508 <![CDATA[How to create Video Popup (lightbox) links?]]> https://blueowlcreative.com/support_wp/forums/topic/how-to-create-video-popup-lightbox-links/#post-31508 Tue, 23 May 2017 21:27:25 +0000 jmcgrail Hi there,

I am trying to create a link that displays a video popup (lightbox), like the ones shown on this demo page: http://blueowlcreative.com/wp/fortuna/videos/. I’ve sorted through here and the theme documentation but cannot figure out how to do it! Please help?

Thank you in advance!
Jenna

]]> https://blueowlcreative.com/support_wp/forums/topic/how-to-create-video-popup-lightbox-links/#post-31509 <![CDATA[Reply To: How to create Video Popup (lightbox) links?]]> https://blueowlcreative.com/support_wp/forums/topic/how-to-create-video-popup-lightbox-links/#post-31509 Tue, 23 May 2017 21:52:05 +0000 jmcgrail Hi again,

I got one step further by inspecting the code on your demo page – I think I’m almost there… The only problem is that the lightbox renders the entire YouTube page rather than just the video frame. The HTML I’ve entered (copied from your demo page) is below:

<div class="wpb_single_image wpb_content_element vc_align_left mfp_iframe_popup white_frame_img max_w240">
		
	<figure class="wpb_wrapper vc_figure">

		<a href="https://youtu.be/hLoEAnTemuU" target="_self" class="vc_single_image-wrapper vc_box_border_grey"><img width="277" height="185" src="http://ptwebdev.tech/wp-content/uploads/2017/04/youtube-logo-button.png" class="vc_single_image-img attachment-full" alt="video_link_img"></a>

	</figure>
</div>

What do I have coded incorrectly that would make the entire page render, instead of just the video?

Thank you!
Jenna

]]> https://blueowlcreative.com/support_wp/forums/topic/how-to-create-video-popup-lightbox-links/#post-31512 <![CDATA[Reply To: How to create Video Popup (lightbox) links?]]> https://blueowlcreative.com/support_wp/forums/topic/how-to-create-video-popup-lightbox-links/#post-31512 Thu, 25 May 2017 07:01:36 +0000 BlueOwl Hi there Jenna,

Sure thing, simply add a Text element and in it (in the TEXT view not VISUAL) add this:

<a class="mfp_iframe_popup" href="https://vimeo.com/35544069">Watch Video</a>

The class=”mfp_iframe_popup” is key here, it sets the link to open the frame in a popup. :)

]]> https://blueowlcreative.com/support_wp/forums/topic/how-to-create-video-popup-lightbox-links/#post-31533 <![CDATA[Reply To: How to create Video Popup (lightbox) links?]]> https://blueowlcreative.com/support_wp/forums/topic/how-to-create-video-popup-lightbox-links/#post-31533 Tue, 30 May 2017 13:54:58 +0000 jmcgrail Hi there,

Thanks so much for your help! I’ve successfully added this into my page but I run across 1 of 2 problems – Either it loads the entire YouTube page (rather than just the video) or it does not load at all (just blank black pop up). Do you have any suggestions to get only the video to play in the popup?

Here’s where the link is located on our site: http://ptwebdev.tech/platform/#smart_waste_system

Thank you!
Jenna

]]> https://blueowlcreative.com/support_wp/forums/topic/how-to-create-video-popup-lightbox-links/#post-31535 <![CDATA[Reply To: How to create Video Popup (lightbox) links?]]> https://blueowlcreative.com/support_wp/forums/topic/how-to-create-video-popup-lightbox-links/#post-31535 Tue, 30 May 2017 17:49:50 +0000 jmcgrail Quick update – I hide to remove the code on our site as we do some review cycles. Here is the code that I have which is either loading the entire YouTube page (rather than just the video) or it does not load at all (just blank black pop up).

<div class="wpb_single_image wpb_content_element vc_align_left mfp_iframe_popup white_frame_img">
<figure class="wpb_wrapper vc_figure" style="text-align: center;"><a class="vc_single_image-wrapper vc_box_border_grey" href="https://youtu.be/hLoEAnTemuU?list=PL57C01E105029C55D" target="_self">
<img class="vc_single_image-img attachment-full" src="http://ptwebdev.tech/wp-content/uploads/2017/05/platform-swrs-overivewvideo-image-1.png" alt="video_link_img" width="500" /></a></figure>

Thank you!

]]> https://blueowlcreative.com/support_wp/forums/topic/how-to-create-video-popup-lightbox-links/#post-31538 <![CDATA[Reply To: How to create Video Popup (lightbox) links?]]> https://blueowlcreative.com/support_wp/forums/topic/how-to-create-video-popup-lightbox-links/#post-31538 Wed, 31 May 2017 07:41:35 +0000 BlueOwl Hi again,

I don’t see the ling anywhere… Just use the text editor (in a text element) to wrap the img tag in an anchor element like described above. :)

]]>