How to display video in a popup

There is an easy way of displaying your media using a popup. Of course, once again we’re going to use a free plugin which will make things appear in a popup/lightbox just by putting a shortcode in our post.

By using WP Video Lightbox Plugin, you can place images, flash media, YouTube, Vimeo, iFrame, etc. in a lightbox overlay and make everything look way much better. A great bonus to this plugin is that videos you put in a lightbox can be viewed on iPads and iPhones, too.

WP Video Lightbox Plugin

PRICE: free

WP Video Lightbox is simple to use but there are few things you should know before placing your shortcode.

Installation and quick setup:

  1. Navigate to Plugins -> Add New
  2. search for ” WP Video Lightbox”
  3. Install and Activate the plugin
  4. Go to Settings – Video Lightbox
  5. Open “prettyPhoto” tab

Here you can set up your plugin and choose how it’s going to behave. You can choose default dimensions of the lightbox, shape of the background and its color, make your videos play automatically, etc.

Dealing with shortcodes:

Once you have set up your lightbox, you are ready to place a shortcode in your post and make your desired video appear in a lightbox.

We know you’re impatient so here are simple shortcodes which will allow you to quickly add a Youtube and Vimeo video into a lightbox.

Youtube: [video_lightbox_youtube video_id=”G7a74BvLWUg” width=”640″ height=”480″ anchor=”click here to open YouTube video”]

Vimeo: [video_lightbox_vimeo5 video_id=”12362192″ width=”640″ height=”480″ anchor=”Click and open your video in lightbox”]

Just copy and paste video id for Youtube or Vimeo and you’re ready to go.

Now that you have tried you new lightbox video plugin, let’s what else you can add/change in your shortcode to make it even better.

  • video_id (required) – this is the unique number which identifies a video on Youtube/Vimeo
  • width (required) – choose a width of the video in pixels
  • height (required) – choose a height of the video in pixels
  • description – you can add a description of the video which will be shown below your video. Good thing is that description field accepts HTML
  • anchor – a text which will be shown as a link a visitor needs to click on in order to show a lightbox. It accepts HTML as well so you can make it a button for example
  • auto_thumb – if you use this feature, plugin will show video thumbnail instead of anchor text

If you don’t want related videos to be shown in your lightbox video, just add ” &rel=0 ” at the end of video_id.

Shortcode example:

[video_lightbox_youtube video_id=”JKwr064-PBY &rel=0″ width=”800″ height=”600″ auto_thumb=”1″ description=”This is a description of our lightbox video”]

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *