How are you currently showcasing videos on your website? When you think about it, the way your video is presented can actually impact its viewership.

If you’ve been embedding your videos inline on your webpages your whole life, then read on! Today, I’m going to talk about featuring your videos in a lightbox and why you might want to do this is some cases.

Inline? Lightbox? What’s the difference?

An inline embedded video player sits among the rest of the content on your page, and plays the video directly on the page. Most of the videos displayed on the Vidyard blog are embedded inline. Here’s an example of how that looks:

A lightbox embedded player, on the other hand, plays your video on top of all of the other content on the screen while dimming the background of the remaining content. Click the player below for an example:

Customer Testimonial: Invoca

Which one should you use?

One player option isn’t necessarily better than the other, but they certainly have their prime situations. Think about the last time you watched an online video. Was it embedded inline on the page, or was it displayed in a pop-up window? Were you actively engaged in watching the content, or were you distracted (even if only for a moment) by the other content on the page?

If you’re like me, it’s easy to divert your attention away from the video to skim the rest of the page, read comments or browse the related videos…even though you haven’t even finished the video! I can still hear the video. That’s good enough, right?

A lightbox embedded video’s strength lies in its ability to bring your video to center stage while dimming out all of the other content that could distract your viewers. If you want 110% focus on your video when the play button is clicked, a lightbox is the way to go. It’s a great way to try upping the overall attention span devoted to your content.

Vidyard provides you with a stock lightbox embed code, as shown with the player I embedded above. It looks like this:

<script type="text/javascript" id="vidyard_embed_code_MI_gb2lRkMzODtZq8dLE8Q" src="//play.vidyard.com/MI_gb2lRkMzODtZq8dLE8Q.js?v=3.1&type=lightbox"></script>
<div class="outer_vidyard_wrapper">
	<div class="vidyard_wrapper" onclick="fn_vidyard_MI_gb2lRkMzODtZq8dLE8Q();">
		<img alt="Dancing_V-Bot" src="//play.vidyard.com/MI_gb2lRkMzODtZq8dLE8Q.jpg?" width="360" />
		<div class="vidyard_play_button"><a href="javascript:void(0);"></a>
		</div>
	</div>
</div>

It displays a thumbnail image, with a play button overlaid on top. Of course, you’re not limited to using our code. What if, for example, you wanted to launch the video by clicking on a text hyperlink like this?

Fortunately, it’s not that difficult. Start by taking the script tag from the embed code above and placing it into the header of your page like this:

<head>
<script type="text/javascript" id="vidyard_embed_code_MI_gb2lRkMzODtZq8dLE8Q" src="//play.vidyard.com/MI_gb2lRkMzODtZq8dLE8Q.js?v=3.1&type=lightbox"></script>
</head>

Now, see this function in the embed code?

fn_vidyard_MI_gb2lRkMzODtZq8dLE8Q();

That’s the javascript function that launches the player. You can use it in a text hyperlink to launch the player like this:

<a onclick="fn_vidyard_MI_gb2lRkMzODtZq8dLE8Q();" href="javascript:void(0);">Click here to watch a video!</a>

The fun doesn’t have to stop there

You can call the function anywhere that you can run javascript. One of my favourite uses was from a customer that wanted the lightbox to launch automatically when a visitor landed on the page from an email link, but would just appear as a normal clickable thumbnail if a visitor came to the site organically. You can find an example of how this is set up here.

Got any other ideas for using a lightbox, or featuring video prominently in general? Feel free to share them in the comments.

Jivan Ramsahai