\nMichael Litt – Vidyard CEO<\/p>\n
Let’s take a look at the different types of video is being utilised today, plus some coding tips on how to implement video within your own email marketing.<\/p>\n
Lights, Camera, ACTION!<\/strong><\/p>\n <\/p>\n In today\u2019s online world, video is everywhere – streaming out the sides of the internet and going full screen on every platform. Videos online evolution can be associated with renowned sites such as YouTube or Vimeo, both created in the early 2000s. These types of sites have transformed the way we see and interact with videos online, paving the way for video sharing, streaming, higher visual and sound quality, and the significant development of audience targeted programming.<\/p>\n Nearly all social media channels today have involvement in video; Facebook, Instagram, Snapchat, Google+, Twitter – to name a few. So it\u2019s no surprise that videos next evolutionary step was into email… in fact it would have been unusual not too.<\/p>\n <\/p>\n So let’s take a look at how you can take advantage of the benefits of having video within your own emails, by giving you some helpful tips on how best to implement it.<\/p>\n Please place your mobile phones on silent, turn off any recording equipment and sit back and enjoy the show…<\/p>\n There are two main ways of placing video into your emails.<\/p>\n The first would be to have an actual mp4 video file playing directly within your email using HTML5 video, with a fallback image for those email clients that cannot play video.\u00a0\u00a0Unfortunately because the list of email clients that support a full working embedded video file is quite limited, the fact is your fallback image is more likely to be displayed than your video\u2026 which makes your video file a bit of a B movie email.<\/p>\n The second, not so advanced but more widely accessible method, would be to incorporate a link to a video within your email by using an animated image or GIF of a video. Utilising a GIF (see below) instead of a full video file ensures your video is more likely to be supported by email clients. \u00a0So your end user gets the impression of a full working video, while you relax knowing you haven\u2019t got the drawback of your video not displaying within your email. \u00a0Using a video format that\u2019s more widely supported, like a GIF, allows you to reap the benefits of having a blockbuster email that drives higher engagement levels.<\/p>\n Now, if you do decide to go down the route of embedding a full video file with a fallback image in your email, we\u2019ve got some technical tips to help you along the way.<\/p>\n Let’s take a look at the code* below and go through how we actually get a video embedded within an email.<\/p>\n As this is a HTML5 build we can start with simple doctype:\u00a0<!doctype html><\/em><\/p>\n Within the stylesheet the video is wrapped in a display: none, until requested to display: block, dependant on the viewing platform. Vice versa for the Video fallback.<\/p>\n The\u00a0@supports<\/em>\u00a0styling are workarounds for different iOS platforms and a Yahoo fallback.\u00a0#MessageViewBody<\/em>\u00a0is for displaying video with the Samsung email client on the Galaxy range.<\/p>\n The next two sections are the video section, with a pre-play\/poster image, and the first fallback image, for those email clients that don\u2019t play video.<\/p>\n The second fallback section is for email clients that load the pre-play image but won\u2019t play the video. This just links an image to an online or streamed version of the video.<\/p>\n The size of the video can be set inline, currently 320×176, just remember to set\/change it for the fallback image as well.<\/p>\n <!doctype html><\/em> <!– video section –><\/em> <!– fallback section –><\/em>The Prequel<\/h3>\n
The Main Feature<\/h3>\n
![\"\"](\"https:\/\/static.wixstatic.com\/media\/0cf246_feb5866672c646a0a4862f847779cfd3~mv2.gif\")
<\/div>\n<\/div>\n<\/div>\n![\"\"](\"https:\/\/static.wixstatic.com\/media\/0cf246_c42bfc42b9cc47d1acd696b48c02a69d~mv2.gif\")
<\/div>\nThe Visual Effects<\/h3>\n
\n<html><\/em>
\n<head><\/em>
\n<title>Jellyfish<\/title><\/em>
\n<style type=”text\/css”><\/em>
\n.video-wrapper {display:none;}<\/em>
\n@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px)<\/em>
\n{<\/em>
\n.video-wrapper { display:block!important; }<\/em>
\n.video-fallback { display:none!important; }<\/em>
\n}<\/em>
\n@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {<\/em>
\ndiv[class^=video-wrapper] { display:block!important; }<\/em>
\ndiv[class^=video-fallback] { display:none!important; }<\/em>
\n}<\/em>
\n#MessageViewBody .video-wrapper { display:block!important; }<\/em>
\n#MessageViewBody .video-fallback { display:none!important; }<\/em>
\n<\/style><\/em>
\n<\/head><\/em>
\n<body><\/em><\/p>\n
\n<div class=”video-wrapper” style=”display:none;”><\/em>
\n<video width=”320″ height=”176″ controls=”controls” poster=”blob:https:\/\/docs.google.com\/91acb26d-2833-4aa8-ae04-b37816b9a9e6″ src=”http:\/\/mirrors.standaloneinstaller.com\/video-sample\/jellyfish-25-mbps-hd-hevc.mp4″ ><\/em>
\n<!– fallback 1 –><\/em>
\n<a href=”http:\/\/mirrors.standaloneinstaller.com\/video-sample\/jellyfish-25-mbps-hd-hevc.mp4″ ><img height=”176″ src=”blob:https:\/\/docs.google.com\/91acb26d-2833-4aa8-ae04-b37816b9a9e6″ width=”320″ \/><\/a><\/em>
\n<\/video><\/em>
\n<\/div><\/em><\/p>\n
\n<div class=”video-fallback”><\/em>
\n<a href=”http:\/\/mirrors.standaloneinstaller.com\/video-sample\/jellyfish-25-mbps-hd-hevc.mp4″ ><img height=”176″ src=”blob:https:\/\/docs.google.com\/91acb26d-2833-4aa8-ae04-b37816b9a9e6″ width=”320″ \/><\/a><\/em>
\n<\/div><\/em><\/p>\n
![\"\"](\"https:\/\/static.wixstatic.com\/media\/0cf246_77066e0230fa41f2815ca16c860f102d~mv2.gif\")
<\/div>\n<\/div>\n<\/div>\n