{"_id":"586bbfe827ef6139005ef136","__v":0,"githubsync":"","parentDoc":null,"user":"542979b61215fe08007e0ee4","project":"542979c51215fe08007e0ee5","category":{"_id":"5429898d1215fe08007e0fe6","pages":["5429ad872e366c080086b5c6","5429cb1b2e366c080086b777","542db0adcb19820800c1f4a3","54380c2df15a8e1400831f88","542aee7d54d88d140075ff00","542af02f54d88d140075ff14","542f14abacabcf080095953b","54651c6df42a472000b0c611","55f81b4f59eace0d0087db2b","56b0c5d81486990d009c101a","56babbffc275570d00ce7105"],"project":"542979c51215fe08007e0ee5","version":"542979c51215fe08007e0ee8","__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-09-29T16:32:13.661Z","from_sync":false,"order":1,"slug":"helpers","title":"Helpers"},"version":{"_id":"542979c51215fe08007e0ee8","project":"542979c51215fe08007e0ee5","__v":4,"createdAt":"2014-09-29T15:24:53.437Z","releaseDate":"2014-09-29T15:24:53.437Z","categories":["542979c51215fe08007e0ee9","542985897a6b690800767fab","5429898d1215fe08007e0fe6","542ac5aa54d88d140075fcaf"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-01-03T15:14:48.968Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":12,"body":"The `{video-preview}` Helper makes it easy to add [Stig Morten Myre's Better Video Previews](https://medium.com/cm-engineering/better-video-previews-for-email-12432ce71846#.fxqyygx6t) to your emails.\n\nInkcite'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.\n\n## Usage\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{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\\\"}\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n## Parameters\n\n#### `bgcolor`\nThe primary background color for the video preview when viewed in an email client with images disabled. Defaults to `#5b5f66`.\n\n#### `duration`\nIf two or more frames are specified, this attribute controls the time it takes to cycle from the first frame through the last frame and then back to the first. Defaults to 15 seconds.\n\n#### `frames`\nThe number of frames in the video preview. You must have this number of images in your project's `images` directory named according to the `src` attribute.\n\n#### `gradient`\nControls the edge color of the radial gradient visible when viewed in an email client with images disabled.  Defaults to a darker version of the specified background color.\n\n#### `height`\nThe height, in pixels, of one frame of the video preview.\n\n#### `href`\nThe fully-qualified URL to the video hosted online.  If the ID specified corresponds to a previously defined HREF, that HREF will be reused. See [Links](doc:links)) for more information about automatic HREF assignment from an existing link ID.\n\n#### `id`\nThe unique ID of the link to the video, used for link tagging and tracking.  If unspecified, Inkcite will assign a new, uniquely numbered ID prefixed with `video-preview` - e.g. `video-preview2`. See [Links](doc:links)) for more information about link IDs.\n\n### `outlook-src`\nSpecify the name of an alternate image (such as an animated GIF) to use in Outlook 2007+ where CSS animation isn't supported.  If unspecified, the first frame of the video preview will be used instead. \n\n#### `no-preload`\nBoolean attribute which, when included, disables the preloading of image frames.  It is not recommended that you disable preloading as it may cause frames to flash momentarily the first time they are loaded, but preloading a large number of frames may delay other image loading in your email.\n\n#### `play-size`\nSpecifies the size, in pixels, of the arrow/circle play button that appears centered in the video preview.  Defaults to 30px.\n\n#### `src`\nThe file name of the video preview frame(s). If multiple `frames` are specified, Inkcite will look for a `%1` in the src file name and replace it for each frame.  For example, specifying 3 frames and a `src` attribute of `frame%1.jpg` will cause Inkcite to animate `frame1.jpg`, `frame2.jpg` and `frame3.jpg`.  The frames should be in your project's `images` sub-directory or fully-qualified URLs to images hosted on the web.\n\n#### `width`\nThe width, in pixels, of one frame of the video preview.","excerpt":"The modern, responsive way to preview video in email","slug":"video-preview","type":"basic","title":"Video Preview"}

Video Preview

The modern, responsive way to preview video in email

The `{video-preview}` Helper makes it easy to add [Stig Morten Myre's Better Video Previews](https://medium.com/cm-engineering/better-video-previews-for-email-12432ce71846#.fxqyygx6t) 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 [block:code] { "codes": [ { "code": "{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\"}", "language": "html" } ] } [/block] ## Parameters #### `bgcolor` The primary background color for the video preview when viewed in an email client with images disabled. Defaults to `#5b5f66`. #### `duration` If two or more frames are specified, this attribute controls the time it takes to cycle from the first frame through the last frame and then back to the first. Defaults to 15 seconds. #### `frames` The number of frames in the video preview. You must have this number of images in your project's `images` directory named according to the `src` attribute. #### `gradient` Controls the edge color of the radial gradient visible when viewed in an email client with images disabled. Defaults to a darker version of the specified background color. #### `height` The height, in pixels, of one frame of the video preview. #### `href` The fully-qualified URL to the video hosted online. If the ID specified corresponds to a previously defined HREF, that HREF will be reused. See [Links](doc:links)) for more information about automatic HREF assignment from an existing link ID. #### `id` The unique ID of the link to the video, used for link tagging and tracking. If unspecified, Inkcite will assign a new, uniquely numbered ID prefixed with `video-preview` - e.g. `video-preview2`. See [Links](doc:links)) for more information about link IDs. ### `outlook-src` Specify the name of an alternate image (such as an animated GIF) to use in Outlook 2007+ where CSS animation isn't supported. If unspecified, the first frame of the video preview will be used instead. #### `no-preload` Boolean attribute which, when included, disables the preloading of image frames. It is not recommended that you disable preloading as it may cause frames to flash momentarily the first time they are loaded, but preloading a large number of frames may delay other image loading in your email. #### `play-size` Specifies the size, in pixels, of the arrow/circle play button that appears centered in the video preview. Defaults to 30px. #### `src` The file name of the video preview frame(s). If multiple `frames` are specified, Inkcite will look for a `%1` in the src file name and replace it for each frame. For example, specifying 3 frames and a `src` attribute of `frame%1.jpg` will cause Inkcite to animate `frame1.jpg`, `frame2.jpg` and `frame3.jpg`. The frames should be in your project's `images` sub-directory or fully-qualified URLs to images hosted on the web. #### `width` The width, in pixels, of one frame of the video preview.