Previews are a staple in the movie industry. We could simply link directly to the previews on YouTube as many do. Here's a simple way to do it:

<p><a data-role="button" href="http://www.youtube.com/watch?v=J9DlV9qwtF0">Watch Preview</a></p>

That will work but the problem is that it takes the user away from your site. While that may not be the end of the world from a user's perspective, it's a big e-commerce no-no.

So, in order to improve the experience and keep the user on our own site, let's directly embed the HTML5 video and use the universal image for movie previews as we have depicted here.

Despite the fact that it looks like this will play in a teeny tiny segment of the page, on smartphones, the video will play in fullscreen landscape mode. The story is a little different on the iPad, where it will play inline at the embedded side.

Ultimately we'd like to push the right sized video back to the user for their device using the following code...