Starter file for responsive email featuring an embedded video via HTML5 player. While the majority of email clients still do not support playing video directly from your inbox, both Apple Mail and the native Samsung email client do - and both represent a large segment of the email client market. To cover all email clients, however, fall-back code is added providing alternative content. Here, an animated gif fall-back indicated a user should click through to see the video using their browser. To get started, I followed the Email on Acid guide How to Embed HTML5 Video in Emails | And Your Other Options.
I created the design for this email as part of a larger eLearning series for IT Software-as-a-Service company. You can read more about the project on my design portfolio site Here, I've replaced the copy and edited the video to remove any proprietary information / logos.
The email showcased here was coded from scratch utilizing my email boilerplate framework (developed from Email on Acid and Litmus.com samples as a starting point). Email on Acid Tests passing in 44 popular mobile, web, and desktop email clients/devices as of August, 2021. All copyrights and trademarks remain property of their respective owners.
Users should be able to:
On Email Clients that Support HTML5 Video (iOS, Apple Mail, Samsung Mail, and Thunderbird)
- View a HERO IMAGE video with HTML5 video standard controls within the email client
On Email Clients that DO NOT Support HTML5 Video, but DO support animated GIF (Majority of email clients)
- View a linked animated HERO IMAGE based on a video still featuring a false "play" button
- HERO IMAGE is linked to the hosted video
On Email Clients that DO NOT Support HTML5 Video nor animated GIFs (Outlook 2007-2017)
- View a linked HERO IMAGE with CTA for to hosted video
ALL CLIENTS
- View a responsive layout depending on their device screen size & email client
-
Gmail App Pixel 2 (Android 9)
-
Gmail App Pixel 3 (Android 10)
-
Gmail App Pixel 4 (Android 11)
-
iPhone11 (iOS 13)
-
iPhone12 (iOS 13)
-
iPhone13 (iOS 14)
- Apple Mail
- Outlook
- Gmail (Chrome, Edge, FireFox)
- Office365 (Chrome, Edge, FireFox)
- Outlook.com (Chrome, Edge, FireFox)
- Yahoo (Chrome, Edge, FireFox)
- View Email: https://ninjulia.github.io/email_html5video/
Email designed and coded by Julia Czarnecki with a lot of help from Litmus and Email on Acid. Any and all copyrighted material is property of the copyright owners. Placeholder logo image provided by placeholder.com used under Creative Commons Licensing.