Inkcite 1.18.3

Documentation

Helpers

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.

Usage

Example Inkcite markup:

 {video-preview id=\"ripcurl\" href=\"https://www.campaignmonitor.com/customers/ripcurl\" src=\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame%1.jpg\" width=600 height=337 frames=3 bgcolor=\"#5b5f66\" gradient=\"#1d1f21\"}

An example of the resulting email HTML output:

 <!--[if !mso]><!-- -->
  <a class="video" href="\https://www.campaignmonitor.com/customers/ripcurl\" 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(\https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg\) 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>
          </div>
        </td>
        <td width=25%>&nbsp;</td>
      </tr>
    </table>
  </a>
  <div style="background-image:url(\https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg\),url(\https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg\),url(\https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg\);display:none"></div>
  <!--<![endif]-->
  <!--[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="\https://www.campaignmonitor.com/customers/ripcurl\" style="width:600px;height:337px;">
      <v:rect fill="t" stroked="f" style="position:absolute;width:600;height:337;"><v:fill src="\https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg\" 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;"/>
          </v:group>
  <![endif]-->

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

Attributes

Attributes in bold are required.

alt
The alternate text displayed in Outlook and in email clients that don’t support CSS animations.
bgcolor
The primary background color for the video preview when viewed in an email client with images disabled.
duration
If there are multiple frames, the total amount of time before the animation loops, in seconds. (Not per frame)
frames
The total number of frames to be featured in the sequence of images.
gradient
Controls the edge color of the radial gradient visible when viewed in an email client with images disabled.
height
The height, in pixels, of one frame of the video preview.
href
The URL for the video or destination site where the recipient will be delivered when they click on the video
id
The unique ID for the video preview component. Used when tagging the link when the user clicks on it.
no-preload
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.
outlook-src
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.
play-size
Specifies the size, in pixels, of the arrow/circle play button that appears centered in the video preview.
src
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.
width
The width, in pixels, of one frame of the video preview.

Credit

Stig Morten Myre’s Better Video Previews