The introduction of HTML5 opens the opportunity to embed video – moving visual media – with audio in the body of an email.
Before this, embedding such media was reliant on third-party plugin-based technologies. The challenges associated with these made it unsuitable for email.
The screenshots below show an example email with an embedded HTML5 video viewed in supporting desktop and mobile email reading environments.
Last updated: 09/18
At the time of writing we advise against embedding HTML5 video in email because it is too unstable. With the email reading environments that support video, it is 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.
Click here to view example in web browser.
About the HTML5 video example:
- The video is a one-minute computer-generated animation
- It does not automatically play. It needs user interaction to initiate playback
- Before playing, a still image (‘poster’) of the video is displayed. This shows a still frame of a character from the sample video
- Video playback controls, overlaid on the video, are supplied by the email application/web browser. Consequently, the availability and presentation of these will differ across environments. Video controls typically include:
- Audio volume and mute
- Progress or ‘timeline’ bar
- Closed captions to equip the video with subtitles or captions, if provided
- Full-screen playback option
- The video will initially play in the body of the page. Usually, this can be altered by toggling the ‘full-screen’ option if the application allows.
- Playback of the video can begin before the file has finished downloading. With progressive downloading, the user starts watching the video as soon as download begins. This capability is dependent on the settings specified during the encoding stage of the supplied HTML5 video file formats detailed later in this document.
- For email environments that do not support HTML5 video, alternative fall-back content can be showed in its place. In the example, an image thumbnail showing a frame of the video is displayed with a ‘play’ icon graphic overlaid. This image is a hyperlink which directs users to a web page, where the video could also be embedded and viewable in a modern web browser.
Why use it?
Using video media has many benefits. These include:
- Consumers’ increasing preference for video content from brands they engage with
- Product videos heavily influence consumer decision making and propensity to purchase
- Video content out-performs 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 (determining usage suitability)?
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 consider 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 Profusion recognises and supports.
Please note, where indicated below, the email applications designed to support HTML5 video exhibit playback instability and bug-ridden behaviour.
Please reach out to your Profusion contact for 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 Profusion’s Email QA handbook, HTML5 video is not supported. Please see the Alternative fall-back presentation of interactive content section within this document for information on measures taken for non-supporting email environments.
Notes for designers and marketers
File format, size and encoding considerations for playback experience
File format and encoding
Please supply the video in the following three container formats (each with the shown codecs) to maximise cross-web browsers/platform compatibility:
Please note that 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 is important to ensure recipients can view the video from the landing web page.
During the encoding process, please 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 this is a factor in 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 following table 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 of this section.
Please keep in mind 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
Please note that 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.
Please note the following requirements and considerations for web server configuration:
- 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 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.
Your Profusion contact can explain your options for the hosting of video media files.
Design presentation and assets
- Video poster image
- It is advisable 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 is indicative of the content of the video, such as the main title or character.
- Do not imitate 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, please supply the poster image at 960 pixels wide.
- Video player controls
- For email, it is 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. As a result, 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 is 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.
It should be noted however that 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, please 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 is shown opposite.
View more guides