Vimeo and YouTube videos now offer higher definition videos that can take up quite a bit of real estate on a web site or blog. One way of optimizing for this is to utilize a method called a Facebox. A facebox is a nice means of displaying a window within your page without a separate popup window.
Lifeline Data Centers had a video produced by Another Cool Design that they wanted to present on their home page – without having to relocate or redesign the theme. So – we made a nice small image with a large play button on it, and incorporated code that generates a stylish window to display the video within.
Implementation was simple using the WordPress Facebox Gallery Plugin from Truimage. I created an external page (video.html) in the root of the site that has the video (with autoplay=1 so that it auto plays when it opens), and then added a text widget with the necessary snippet.
<a href="video.html" rel="facebox" onclick="javascript:pageTracker._trackPageview('/
special/mypage');"><img src="http://www.lifelinedatacenters.com/wp-content/uploads/2010/07/lifeline-video.png" title="View the Lifeline Data Centers Video" /></a>
The rel=facebox designation is what initiates the code once the link is clicked. It pops up the video facebox that begins to play immediately. It’s a simple implementation and an easy solution for embedding one or more videos into a page. We’ll be utilizing this method on another site very soon!
NOTE: It’s important to capture the number of views with the video within the client’s analytics (Google Analytics), so we also added an onclick event on the anchor tag. Now, when people click on the video, we get a ‘virtual’ pageview. I’ve added the code above.
Related Martech Zone Content
