It’s important to be able to securely embed a YouTube video in lightbox when you are running a website in https. Unfortunately, most lightbox plugins are not compatible with https. This leads to various security warnings/mixed content errors in the browser and some modern browsers even block the content. In this article, I will show you how you can embed a YouTube video in lightbox and make it compatible with https.
How to Securely Embed a YouTube Video in Lightbox
1. Install and activate the Lightbox Ultimate plugin.
Lightbox Ultimate is a very popular lightbox plugin for opening content in lightbox. It allows you to create a text/image link which will embed a YouTube video in lightbox when clicked. You can even choose to create an automatic thumbnail with a play button instead of creating a custom thumbnail image.
2. All you need to do is insert a shortcode into the post/page editor and the plugin will automatically create a link which will open in lightbox.
Here are the shortcodes for it:
[wp_lightbox_prettyPhoto_anchor_text_video link="https://www.youtube.com/watch?v=F4gJsKZvqE4" width="480" height="360" text="Click here to open the Youtube video" description="Video description goes here"]
Video with Automatic Thumbnail
[wp_lightbox_prettyPhoto_video link="https://www.youtube.com/watch?v=F4gJsKZvqE4" width="480" height="360" description="Video description goes here" title="Video title goes here" auto_thumb="1"]
When you use the automatic thumbnail option you don’t have to specify a custom thumbnail image.
Video with Custom Thumbnail
[wp_lightbox_prettyPhoto_video link="https://www.youtube.com/watch?v=F4gJsKZvqE4" width="480" height="360" description="Video description goes here" source="http://example.com/wp-content/uploads/thumbnail/jason-bourne.jpg" title="Video title goes here"]
Secure YouTube Video Demo
When you view the page it should look similar to this,
When you are viewing from a mobile device it will look great as well.
Clicking on a link will open the secure YouTube video in lightbox. This is a screenshot from a mobile device as you can see the popup window is responsive.
If you like the demo feel free to check out the Lightbox plugin homepage.Disclosure: This page may contain affiliate links. If you follow one of those affiliate links and purchase something it will provide me with a little bit of a commission. This costs you nothing extra but helps maintain my site, free plugins, and themes. So I thank you for your support.