HTML5 has opened the opportunity to embed video with audio in the body of an email. Before this, embedding moving visual media relied on third-party plugin-based technologies. But the challenges associated with these made it unsuitable for email.
Even now, at the time of writing, we advise against embedding HTML5 video in email. It’s simply too unstable. With the email reading environments that support video, it’s not guaranteed that playback will function.
Instead we recommend driving users from the email to a landing page with the embedded video, where playback via a web browser is reliable.
Now read on for our technical guide.
Last updated: 09/18
Why use video?
Using video media has many benefits. These include:
- Consumers’ increasingly prefer video content from brands they engage with
- Product videos heavily influence consumer decision-making and propensity to purchase
- Video content outperforms text and imagery for memorability
- The use of video and audio media allows the delivery of brand identity in the message
- Video consumption on mobile devices has steadily increased.
When to use it?
You could consider using video media in an email for:
- Product demonstration
- How-to guides/tutorials
- Event videos – pre and post-event
- Expert interviews and commentary.
HTML5 video in email is not appropriate for:
- Decorative animations. This is because auto-play functionality is mostly disabled across email environments. Instead, think about using animated GIFs or CSS animations
- Streaming of video from a live broadcast
- Reporting user-initiated video plays from within the email.
Which email reading environments support this?
Last updated: 09/18
At the time of writing, HTML5 video is supported in the following popular email reading environments that we recognise and support.
Where indicated below, the email applications designed to support HTML5 video exhibit playback instability and bug-ridden behaviour.
We can provide an email environment opens report to determine the percentage estimation of recipients opening in these environments.
For other popular email reading environments not listed above (but listed in our Profusion Email QA handbook) HTML5 video is not supported. You’ll see the alternative fall-back presentation of interactive content section further on for information on measures taken for non-supporting email environments.
Notes for designers and marketers
File format, size and encoding considerations for playback experience
You’ll need to supply the video in MP4, Ogg or WebM container formats (each with suitable codecs) to maximise cross-web browsers/platform compatibility.
The above table indicates the video containers/codecs for best compatibility across current modern web browsers. While the MP4 container with corresponding codecs shown above is the format recognised by the supporting email client applications, it’s important to ensure recipients can view the video from the landing web page.
During the encoding process, consider the following:
- While High Profile encoding is increasingly supported by later devices, Android and Apple recommend encoding videos with a baseline profile. MP4s encoded with a high profile will not run on lower end hardware (eg early/low-end smartphones).
- Place the video index at the beginning of the video file to enable progressive downloading.
- Characteristics of the video such as its duration, resolution, frame rate, bit rate, audio, compression settings and file type can all affect the file size of the video. While the trade-off is often between that of video quality and file size, video encoding applications will provide options to best balance this.
File size and download time
Media files such as video and audio can be comparatively much larger in file size than that of images, since they hold more information. This is an important consideration as it affects how much time it will take the user to download and begin watching the video.
Every year, the average internet download speed of fixed line home broadband rises in the UK. Ofcom reported an average of 36.2Mbps internet download speeds during 2017. Based on this figure, the example video used in the proof of concept, which is 5.26MB in file size, would take approximately 1.16 seconds to fully download via this connection speed. As a further example, a three-minute full high definition resolution video, 70MB in file size, would take approximately 15.5 seconds to download.
Similarly, users downloading a video via a mobile internet connection may experience varying speeds depending on their network provider, network package and geographical area. The table below shows quoted download speeds for each available mobile network type, with download time for the example videos.
There are also factors other than file size and download speed that can affect download times. For brevity, these are not the focus here.
A good thing to keep in mind however, is that HTML5 video enables the user to begin watching the video playback before the video file has finished downloading.
Hosting of media (video/audio) files
While HTML5 video allows playback of video from the body of an email, the video files themselves are not sent as attachments with the email. Instead, the video file formats must be uploaded and made accessible on a web server.
The requirements and considerations for web server configuration are:
- The server hosting the media files must send the correct MIME type for each media file so the receiving web browser or application can identify the file and handle it accordingly. Further information can be found from the Mozilla Developer Network.
- The byte-range request (also referred to as content-range or partial-range request) must be supported. This is a requirement for iOS systems, such as iPhones and iPads. Information for this can be found from Apple.
- One server/domain should be enabled for ‘Cross Origin Resource Sharing’ (CORS) to allow subtitle/caption files to load, and simultaneously host these files for the video element:
- Poster image
- Video fall-back image
- The server hosting the media files can handle the video download demands of the audience.
We can explain your options for the hosting of video media files.
Design presentation and assets
Video poster image
- It’s a good idea to include an image that is displayed before video playback. The poster image covers the video frame and is intended to give the user a hint of the video content before they play the video.
- The technical requirements, considerations and recommendations for the poster image are:
- It might be appropriate to use a still frame from the video footage as the poster image. This could include a frame that hints at the content of the video, such as the main title or character.
- Avoid imitating video play controls in the poster image creative. Email applications and web browsers will typically overlay video controls on the video frame/poster image.
- Ensure that the aspect ratio (the proportional relationship between the width and height) of the poster image matches the aspect ratio of the video. For example, if the aspect ratio of the video is 16:9 (a common widescreen format for computers and televisions), the aspect ratio of the poster image should also be 16:9. While email applications and web browsers that support HTML5 video will typically centre align and scale the poster image proportionately inside the frame, an identical aspect ratio will ensure the video frame is correctly covered by the poster image.
- For improved appearance on high DPI devices such as mobile phones and tablets, we recommend that the poster image is supplied at double the resolution of the video frame as it appears in the body of the email. For example, if the video frame is sized at 480 pixels wide in the body of the email, you’ll need to supply the poster image at 960 pixels wide.
- Video player controls
- For email, it’s not possible to provide customised video player controls. Instead, the default controls are supplied by the email client/application/web browser that is used to view the email. So the positioning and functionality of controls for the video in the email will differ across these applications.
- Accessibility concerns
- Captions, audio descriptions and subtitles that accurately describe the video content and should be provided to improve accessibility of the video.
- Captions provide accessibility for users with hearing difficulties, by providing a transcript of the spoken and non-spoken audio in the video. This transcript must be provided in the WebVTT (vtt) file format.
- Subtitles provide a transcript of the dialogue, usually translated in a selection of languages. These must also be provided in the WebVTT file format.
- When provided via the HTML5 video player controls, users can view the captions and subtitles transcript in the HTML5 video frame during playback.
- It’s impractical to report on playbacks of video embedded in email – the required technologies are disabled in email reading environments.
Interactive content fall-back
What is a fall-back and why should my interactive email contain it?
As previously mentioned, HTML5 video is not supported in every email reading environment.
This can lead to an unpredictable user experience – such as loss of functionality, presentation and layout issues – when an email with embedded HTML5 video is viewed in an email reading environment that does not support this feature. Measures can be taken within the email however, which attempt to avoid this by presenting alternative, non-video media content within the email when viewed in these environments. This is referred to as a ‘fall-back’ – a design and development consideration for interactive emails which intends to progressively enhance the appearance and functionality of the email. It provides the best possible user experience across the most popular email reading environments.
However these fall-back measures are best effort attempts which operate on characteristics of email environments that are subject to change. They are not bullet-proof methods.
In the supplied design for the email, you’ll need to supply a variant showing how the alternative fall-back content for the HTML5 video should be presented within the email.
The available content fall-back options available for HTML5 video are:
- A still-frame image with hyperlink to landing page with embedded HTML5 video
This provides the opportunity to watch the video on a website landing page using a capable, modern web browser.
- This is typically implemented in the email by presenting a still frame image from the video.
- As an immediate hint to the user that that the image is related to video media, a ‘play’ icon is superimposed over the image.
- Similar to the poster image recommendations, for the fall-back image we recommend:
- The aspect ratio of the fall-back image matches the aspect ratio of the video frame.
- The size resolution of the fall-back image is supplied at twice the resolution that it be in the body of the email.
- Where unsupported, only the video frame and its controls will default to the fall-back content.
- The image with a hyperlink to the landing page will provide best user experience. While there is no technical requirement for the fall-back image to occupy the same space as the HTML5 video frame, for simplicity of the email layout we recommend it.
- Alternative fall-back content to the hyperlink/image mentioned can be provided, or not at all. Using fall-back content that occupies the same area as, or has size dimensions similar to that of the video, will cause layout inconsistencies within the email.
Screenshots of the still-frame hyperlink image fall-back content are shown here.
So, was this guide helpful? To find out more, connect with us.
View more guides