Do you have a YouTube channel? Or maybe you upload videos to Vimeo or you are using Flash? Or maybe you just love blogging and embedding high quality videos, created by others into your posts?
Well in this case why not present all videos to your audience in style with a fancy lightbox overlay which can also be used to show images? Here’s how to do this:
First of all you need to install and activate the WP Video Lightbox plugin.
Then you need to adjust some settings under Settings -> Video Lightbox in your WordPress admin panel. Pay special attention to the prettyPhoto tab. From there you can adjust:
- To enable or disable the prettyPhoto library
- The animation speed
- The slideshow interval in ms (the default is 5000)
- To enable or disable the option to play the slideshow automatically
- The opacity – here you have to specify a value between 0 and 1 and the default is 0.8
- To enable or disable the title in each video
- To enable or disable resizing
- To enable or disable expanding
- The default width (this can be later overridden by shortcodes, but I will get to this later in this post)
- The default height (the same applies here)
- The counter separator label (in case there is a gallery on display by using this plugin)
- The lightbox theme
- The horizontal padding
- To enable or disable the option to hide flash content on the page on which you are using the plugin
- The flash wmode attribute
- To enable or disable autoplay
- To enable or disable modal (if this is enabled only the close button on the lightbox will allow you to actually close it, otherwise you can simply click anywhere outside the lightbox and it will be closed)
- To enable or disable deeplinking
- To enable or disable the overlay gallery on mouse over
- To set the overlay gallery maximum number of pictures
- To enable or disable keyboard shortcuts
- To enable or disable IE6 fallback compatibility
Once you are done you need to click on the “Save Changes button”.
Do not let the amount of settings to scare you – most of them can be actually overridden by using shortcodes and speaking of this, the shortcodes are one of the ways to use the plugin in your content.
So here are the options (you can adjust the codes as you desire in order to embed the specific video – i.e. set width, height, video id and anchor):
- Embedding Vimeo video by default:
[video_lightbox_vimeo5 video_id=”13562192″ width=”640″ height=”480″ anchor=”click here to open vimeo video”]
- Embedding YouTube video by default:
[video_lightbox_youtube video_id=”G7z74BvLWUg” width=”640″ height=”480″ anchor=”click here to open YouTube video”]
- Embedding Vimeo video with a custom image that serves as an anchor:
[video_lightbox_vimeo5 video_id=”13562192″ width=”640″ height=”480″ anchor=”http://www.example.com/images/vimeo-thumb.jpg”]
- Embedding YouTube video with a custom image that serves as an anchor:
[video_lightbox_youtube video_id=”G7z74BvLWUg” width=”640″ height=”480″ anchor=”http://www.example.com/images/youtube-thumb.jpg”]
The plugin provides you also with these additional features:
- Automatic retrieval of the video thumbnailby adding auto_thumb=”1″ at the end of the shortcodes for YouTube and Vimeo.
- Load YouTube videos using https which is extremely useful in case you have SSL installed on your site
- Prevent YouTube from displaying suggested videos at the end of the embedded video by adding &rel=0 at the end of the video ID.
- Flexiblity of using both shortcode/html code to pop up media in lightbox
- Show description of a popup in overlay
As I have mentioned above the shortcodes are one way of displaying videos in lightbox. However you may choose HTML as well. On this link you will find the detailed usage documentation of the WP Video Lightbox plugin. From there you will learn also how to:
- embed flash
- embed content by using iFrame
When using custom images as your anchor, I’d suggest to choose a suitable size and to optimize the image in terms of a file size. JPEG might be a good option as it provides great compression. This is important for On-Page SEO.
One last thing – the embedded videos are responsive which is also great for mobile devices. However you should know that in my experience with the plugin I had problems with using way too many embedded videos with the lightbox overlay in terms of mobile friendliness. So I’d suggest to keep this number to a minimum just in case and always to check if the page is mobile friendly.
So what are your thoughts on WP Video Lightbox, friends? Would you use it and why? Or maybe you have already given it a try and want to share your experience? The comments section below awaits you!
Also please share this post in the social media of your choice.
See you soon, friends!