Stig’s Better Email Video Previews with Inkcite

Stig Morten Myre’s Better Video Previews for Email is a modern approach that leverages CSS animation, responsive background images and VML to give your recipients a more engaging, interactive video preview experience.

Like the rest of the #emailgeek community, the team here at Inkceptional was extremely impressed and eager to use it in an upcoming campaign. That said, this cutting-edge effect can be a bit daunting to implement. There are lots of opportunities to make an #emailmistake: image file names appear repeatedly in the code, calculations are required required if you want to change the size or number of frames and values need to be kept consistent in across HTML, CSS and VML code. Keeping your email markup DRY (don’t repeat yourself) and minimizing the chance of miscalculation is essential to ensure confidence when you hit the send button.

We’re pleased to announce that Inkcite 1.12 now makes it easy to add Stig’s compelling video previews to your next email. Inkcite is a free, open-source static preprocessor for building modern, responsive emails. Installation and getting started instructions available here.

Introducing {video-preview}

The new {video-preview} Helper simplifies adding modern video previews into a single line line of markup. It is completely customizable — you control the number of frames, duration, size, background gradient and other parameters — without requiring you to duplicate code or calculate percentages.

Here’s an example:

{video-preview id="icon-a5" href="https://www.youtube.com/watch?v=klJ9isFLIB4" src="frame%1.jpg" outlook-src="outlook.jpg" width=600 height=337 frames=5 duration=10 bgcolor="#EA262A" gradient="#a31b1d"}

When Inkcite’s processes this markup, it produces the CSS, HTML and VML to create a modern video preview.

• Inkcite will build the list of frame file names by automatically replacing the %1 in the src attribute with 1, 2, 3, etc. depending on the total number of frames you’ve specified.
• Inkcite creates a transparent, 25% wide placeholder PNG that maintains the aspect ratio of your video preview when viewing on mobile devices.
• Inkcite calculates the correct percentages for the CSS animation sequence based on the number of frames and duration. Using Stig’s method, still frames appear twice as long as it takes to transition between those frames. When you change the frames attribute, Inkcite does all the algebra for you — no calculator required.
• The Helper also calculates dimensions, borders and padding necessary to size the circular play arrows in both the CSS and VML versions. Change the play-size parameter to make the play button larger or smaller.
• The Helper embeds the hidden <div> which preloads all of the frames.
• We often showcase multiple videos in our newsletters, so Inkcite will create uniquely-named animation classes for each {video-preview} that appears in your email. Common CSS is reused to ensure there is no unnecessary duplication or code bloat.
• Also, if enabled, Inkcite safely minimizes the CSS and HTML plus it will optimize and compress your still frame images to ensure your final email loads and renders as quickly as possible.

Here’s what Inkcite produces from that single line of markup:

Complete documentation on the {video-preview} Helper can be found here.

Of course, the emails you build with Inkcite are ready-to-send with Campaign Monitor. Thanks to Stig for publishing the detailed video preview walkthrough, and the rest of the Campaign Monitor team who work tirelessly to make the email community a better place.

It’s 2017 — resolve to optimize your email development workflow! The friendly crew of Litmus’ Email Design podcast wrapped up 2016 with a roundup of popular frameworks, preprocessors and task runners, including Inkcite!