How to Securely Embed a YouTube Video in Lightbox

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. You can download the plugin from this affiliate link: https://www.tipsandtricks-hq.com/?p=3163?ap_id=naa986.

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,

screenshot showing how to embed a YouTube video thumbnail for lightbox

When you are viewing from a mobile device it will look great as well.

screenshot showing how a YouTube video thumbnail looks in a mobile device

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.

screenshot of secure YouTube video popup in lightbox from a mobile device

If you like the demo feel free to check out the Lightbox plugin homepage here (affiliate link): https://www.tipsandtricks-hq.com/?p=3163?ap_id=naa986.

Leave a Comment