How Knak Does Email: Using Video in Email

One of the most common questions I see on forums related to email creation is, “How can I put a video in an email?” Unfortunately, embedding a standard HTML video in an HTML email isn’t widely supported across email clients, leading to broken emails and a poor user experience.

Source: CanIEmail.com

Currently, only 8.5% of email clients support the <video> HTML element. That basically makes it a no-go unless you can verify that a large number of your recipients are using Apple mail, IOS mail, or Outlook for Mac.

Fortunately, there are other options for displaying or introducing video content in an email, but before you decide which method to use, consider why you want to include video in your email:

• Is it an educational video?
• Are you trying to increase views on your video channel?
• Do you want to use the video to showcase a product or service?

Once you’ve determined the intention for your video, you can find the option that will best serve your purpose.

Option 1 – Put your video on landing page instead

Ultimately, an email is not the best place to watch a video. The confines of the email pane can make the experience clunky, and since you can’t provide access to full screen controls, it may be best to simply include some well-written copy and a compelling CTA designed to drive readers to the landing page where your video is hosted. There you’ll be able to make better use of web development techniques that properly showcase your video content.

This option puts the decision to stream the video (or not) in the hands of the recipient. They may be out and about and unwilling to use their data to download/stream the video, which might lead them to close the email with the intention of getting back to it later.

For this reason, I’d suggest that this is the method to use when your video is educational/instructional in nature. Since your copy for an email like this will likely involve instructions of some sort, your CTA can link to your video on a landing page, and those who need more explicit instructions will be able to access it easily.

A good example here is a “how to” email. If you’re sending “how to” advice, you may spell out step-by-step instructions in the email, and then use your CTA to direct readers to an instructional video that explains further. In this case, hosting your video on a landing page makes perfect sense since your video content is supplemental.

Option 2 – Use an image with a play button baked into it

This option allows you to pick the most relevant, compelling frame from your video and use it to drive clicks while still protecting the user experience.

To do it, simply choose an appropriate freeze frame from your video and edit in a play button over top of it (bonus point if you create a well-branded play button). Once users click on the video, it will open on a landing page that can be coded to autoplay the content.

This method is preferred if you’re trying to boost views on your video channel as it helps drive engagement without giving too much away. Make sure you also include a “Share” button on the video itself so viewers can share it on their social channels and help drive traffic on your site. 

Example Image:

Option 3 – Use a background image with a play button on top

For this method, you’ll select a background image and add a play button or an image of a play button in the foreground.

With Knak, the background image will be supported across all major email clients, and you can use a button or image content block to design your play button. The caveat here is that only the button itself will be clickable (as opposed to Option 2, where the entire image will be clickable). The benefit is that all the editing can be done in Knak, and you’ll be able to place the button exactly where you want it over the image.

This is another great method if your goal is to increase views on your video channel. Again, don’t forget to add a “Share” button to boost engagement.

Option 4 – Incorporate a GIF

If you want to add some animation to your email without fully embedding a video, the best way to do it is to use a GIF.

The animation of your GIFs will be fairly well supported, and you can use it as a background image or as a regular image and simply incorporate a play button. You can use a preview of the video as a GIF and then link it to the full video, or you can even include the entire video by exporting it as a GIF.

Just be careful about the file size if you do this. Make sure your GIF won’t take a long time to load or use up too much of your recipients’ data. Consider using a static background image and only animating the play button as a GIF. The impact is subtle, but effective.

Source: Mail Poet

This is the recommended method if you’re trying to use video to showcase a product or service. Having a compelling GIF and a strong video will cover all the bases and get your message out regardless of whether or not recipients click on the video.

One note: Animation isn’t supported in the Windows version of Outlook, so the first frame of your GIF will show as a static image. Make sure you select the first frame carefully to ensure that it still looks great.

For more best practices around adding GIFs to your emails, check out this How Knak Does Email post.

Example image:

Need Help?

Even though only 8.5% of email clients currently support the <video> HTML element, we think we’ll see that number start to rise in the near future so putting video in email will become more common.

In the meantime, reach out to us if you have questions. We’re happy to help you incorporate these workarounds so you can continue to drive engagement and send out great-looking emails.