How to Dislay Video in Popup in WordPress

In today’s tutorial, we’d like to show you how easy it is to display video in popup in WordPress. Intead of just embedding the video, displaying the video in a nice popup can give a wow effect to your visitors and a good first impression. First, you need to install WP Video Lightbox plugin.

Then, you’ll be able to embed the video using a shortcode. The shortcode accepts lots of parameters so you can easily customize the overlay to your likings. Since there are lots of them, we recommend you to check them out at the plugin’s official page on WordPress plugin repo.

Here’s another thing. You’ve probably seen in some other websites that when user clicks a button, it will trigger the video to be opened in a nice popup.

Here’s the HTML code I used to add the button.

As you can see, the button class is important to styling the button while rel="wp-video-lightbox" is added to trigger the video to be opened in popup when user clicks the button. If you’re using Genesis Framework, you may use button class. However, for other WordPress themes, you may copy the following CSS code into your theme’s style.css file:

/* Button */
 
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
	background-color: #333;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	padding: 14px 22px;
	text-transform: uppercase;
	width: auto;
}
 
 
 
button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"],
.button:hover {
	background-color: #e5554e;
	color: #fff;
}

We hope this tutorial helped you to display video in popup in your WordPress site.