![]() ![]() To add an HTML5 video to your email, you can use the following code: ![]() Not a perfect user experience but a lot better than a black screen. The image can be clickable, leading a reader to a video hosted elsewhere. ![]() GIFs are not supported in these clients so a quality SVG is probably a better idea. It’s a GIF.Ī static image can naturally be used as a fallback too, especially if you have plenty of readers using Outlook versions 2007-2013. It’s okay if the transitions are not smooth. gif formats, try to remove the majority of frames when creating the latter. For that reason, rather than save the same video in both. GIFs tend to get heavy, especially if they last for more than a few seconds. As a reminder, we’re using a GIF here as a fallback so a reader can see our animation regardless of the device they open an email on (with a small exception, more below). Try to keep things short as it will also lead to a quick load for a user. So, let’s go step by step and see how to code it.įirst, record a video and save it in a. Add an HTML5 video to emailĬheck out this Mailtrap welcome email to see how embedded HTML5 video works:Įmbedding HTML5 videos requires a bit of knowledge of this framework but it’s not rocket science by any means. The mso-hide issue having been addressed, let’s get back to embedding HTML5 video in email step by step. Follow Mailtrap engineers’ code lines and find a special section showing how to embed HTML5 video in emails in the In our case, we will further use the ‘mso-hide:all’ tag to hide some of the video content and use fallbacks or redirects instead. If you need to understand how mso-hide values are used in detail, all you have to do is type “mso” into the filter bar, and it should give you the list of Microsoft specific CSS attributes with mso- prefix. ![]() This MSO – Style Reference Sheet link comprises 372 Microsoft specific styles which includes common ones used in email. This code will be ignored by other email clients and read by the Word-based versions of Outlook only. To avoid this, we can add MSO (Microsoft Office) tags to HTML / CSS anywhere in an email template. MSO-Hide: how to hide or display video content in emails for Outlookīefore we proceed any further there is an important thing to remember: Windows Outlook 2003 and above use Microsoft Word as a rendering engine, which can lead to some weird rendering issues. All the others can be served a static image or even an animated GIF. The supported browsers account for about 50-60% of devices capable of receiving emails. The following chart demonstrates where precisely it works and where a fallback image will load instead. HTML5 is not yet fully supported in all email clients. The key drawback of this format is its client support. It’s also one of the main advantages of embedding HTML5 videos in emails. Heavy emails load slowly, drain mobile plans, and negatively impact the spam scores of emails. The latter is of utmost importance in emails. It’s appreciated for its sharpness, compression capabilities, and the relative lightness of videos, as compared to GIFs or other video formats. It’s very common on the web and is gaining traction in emails too. When considering the type of video for your emails, HTML5 often pops up. Ultimately, the suitability depends on the communication style of your brand, the audience, the type of emails you send, and others. A video is a nice addition to a newsletter, a product update, an onboarding email, or an order confirmation message. These are just some examples and there are certainly many more. A video preview can promote other types of content you produce, way better than a link in the text.A quick screencast sent in your onboarding email often works better than a long list of instructions for a reader.An embedded, optimistic video depicting your team makes for a wonderful employer branding material.A memorable animated background that appears in your emails is almost guaranteed to stick in the reader’s memory.A funny video content can engage a reader and make an email a lot more fun to read.Stay tuned! Why you should add a video to an emailĪ video won’t work everywhere but there’s plenty of situations when it will. We will also talk about viable alternatives to video embedding. Two Mailtrap emails – a welcome letter with an embedded video on how Mailtrap works, and a domain setup update email with the background video will be our reference for this matter. Today we’ll discuss HTML5 videos in emails and how to embed them in two different ways. So it’s no wonder then that they’ve quickly come to emails too and more and more electronic messages come with embedded GIFs and other types of videos. Videos and interactive content are certainly some of the top trends of the early 20’s. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |