Inkcite 1.18.3

Video Preview

The modern, responsive way to preview video in email using CSS animation and fallbacks.

The {video-preview} Helper makes it easy to add Stig Morten Myre’s Better Video Previews to your emails.

Inkcite’s implementation gives you full control over the size, duration, number of frames and background gradient colors. It automatically calculates animation percentages, generates a transparent placeholder image (to preserve the preview’s aspect ratio on mobile devices) and creates all of the CSS animation and hover styles, plus VML for Outlook compatibility.


Example Inkcite markup:

 {video-preview id=\"ripcurl\" href=\"\" src=\"\" width=600 height=337 frames=3 bgcolor=\"#5b5f66\" gradient=\"#1d1f21\"}

An example of the resulting email HTML output:

 <!--[if !mso]><!-- -->
  <a class="video" href="\\" style="background-color:\#5b5f66\;background-image:\#1d1f21\;color:#0099cc;display:block;text-decoration:none" target=_blank>
    <table border=0 cellpadding=0 cellspacing=0 style="-webkit-animation:15s ease infinite video1-frames;animation:15s ease infinite video1-frames;background:url(\\) 0% 0% / cover no-repeat" width=100%>
      <tr style="transition:all .5s cubic-bezier(0.075, 0.82, 0.165, 1)">
        <td width=25%><img alt="" border=0 src=images/vp-150x337.png style="display:block;height:auto;opacity:0;visibility:hidden" width=100%></td>
        <td align=center valign=middle width=50%>
          <div class="play-button" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.1)); border: 4px solid white; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 2px rgba(0,0,0,0.3); height: 34px; margin: 0 auto; padding: 18px 16px 18px 24px; transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1); width: 34px;">
            <div style="border-color: transparent transparent transparent white; border-style: solid; border-width: 17px 0 17px 30px; display: block; font-size: 0; height: 0; Margin: 0 auto; width: 0;">&nbsp;</div>
        <td width=25%>&nbsp;</td>
  <div style="background-image:url(\\),url(\\),url(\\);display:none"></div>
  <!--[if mso]>
    <v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" coordsize="600,337" coordorigin="0,0" href="\\" style="width:600px;height:337px;">
      <v:rect fill="t" stroked="f" style="position:absolute;width:600;height:337;"><v:fill src="\\" type="frame"/></v:rect>
        <v:oval fill="t" strokecolor="white" strokeweight="4px" style="position:absolute;left:261;top:129;width:78;height:78"><v:fill color="black" opacity="30%"/></v:oval>
          <v:shape coordsize="24,32" path="m,l,32,24,16,xe" fillcolor="white" stroked="f" style="position:absolute;left:285;top:153;width:30;height:30;"/>

Inkcite’s markup is 90% shorter than conventional HTML.


Attributes in bold are required.

The alternate text displayed in Outlook and in email clients that don’t support CSS animations.
The primary background color for the video preview when viewed in an email client with images disabled.
If there are multiple frames, the total amount of time before the animation loops, in seconds. (Not per frame)
The total number of frames to be featured in the sequence of images.
Controls the edge color of the radial gradient visible when viewed in an email client with images disabled.
The height, in pixels, of one frame of the video preview.
The URL for the video or destination site where the recipient will be delivered when they click on the video
The unique ID for the video preview component. Used when tagging the link when the user clicks on it.
Boolean attribute that, when present, displays the preloading behavior (not recommended). Pre-loading the images prevents a flash that can occur because the browser only loads the frames once the animation demands them.
The name of the image that will be displayed in Outlook clients that don’t support CSS animation between frames. If not specifie, the first frame will be displayed instead.
Specifies the size, in pixels, of the arrow/circle play button that appears centered in the video preview.
The name of the image source file. If you have multiple frames to feature in your video, embed %1 wherever the frame number should be injected. For example, video%1.jpg becomes video1.jpg, video2.jpg etc. up to the total number of frames.
The width, in pixels, of one frame of the video preview.


Stig Morten Myre’s Better Video Previews