Responsive, interactive video links

This is the first in a series of articles about the Cook Smarts redesign.  Try their meal plan service to experience the redesign for yourself.

The recipes on Cook Smarts include videos that explain techniques such as seasoning and tenderizing chicken, quick-cooking potatoes, and chopping eggplants.

Prior to the redesign, the videos were linked within the text of the recipe, bringing the user to the Vimeo page in a separate tab. On a phone, looking at a very quickly was a bit difficult, requiring switching back and forth between tabs.

We looked for a smoother way for people to enjoy videos, and found a few techniques that helped.

Label video links

We added a video icon after each video link, using a bit of CSS and FontAwesome.

a[href*='vimeo']:after, a[href*='youtube']:after, a[href*='']:after {
content: "\f03d";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
padding-left: 4px;
padding-right: 3px;
font-size: .9em;

This bit of code looks for a link to a YouTube or Vimeo video, and adds a video camera icon next to it. Screen Shot 2013-11-10 at 12.45.49 AMShow the video immediately, without leaving the page

Opening the YouTube or Vimeo page in a separate tab was a waste of the user’s time. Instead, we used FancyBox 2’s  media helper to open the videos in a modal popup.

When the user clicks a video link, the video pops up in the same page and immediately starts playing.

Video playing in a FancyBox 2 modal window

We added this functionality purely with JavaScript.

First, we add a class called fancybox-media to all video links. In the future, we may do this in the back-end rather than on the client, but this was much faster and takes care of past, current, and future recipes.

$('a[href*="vimeo"], a[href*="youtube"], a[href*=""]').each(function() {

Next, we tell FancyBox to open a video popup when someone clicks on a link with the fancybox-media class.

openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}

That’s it!

Closing thoughts

The goal of this was to make video more seamless for the user. It works on desktop and mobile, thanks to FancyBox’s awesomeness and Vimeo’s and YouTube’s mobile support.

Embedding the videos on the page itself was of course another option, and we may still do that. But clearly-marked video links in the recipe, which do not require the user to leave the page, seemed to be a clear next step.