Chris Converse |
Wednesday, January 22, 2014
Explore this course at lynda.com.
With so many people now reading email on mobile devices that support the HTML5 standard, it’s becoming easier and easier to incorporate video into emails. Even better: Mobile and desktop email clients that don’t support HTML5 video will fall back to a user-friendly, clickable link, so no one is left out.
The markup for HTML5 video, as shown below, specifies the basic attributes for the video, including its dimensions, controls, and a poster image. Inside the video tag, we specify the actual video file inside a dedicated source tag, along with its encoding information. If an email app or web browser supports the video tag, it will then look for a nested source tag while ignoring other tags. Email apps that do not support the video and source tags only see the other tags nested inside the video tag.
<video width="570" height="428" poster="video/our_vinevard.jpg" controls="controls"><source src="video/our_vinevard.mp4" type="video/mp4"></source><a href="http://mysite.com/" rel="external nofollow"><img src="video/our_vinevard.jpg" width="570" height="428"></a></video>
Given the smooth fallback behavior of this solution, we can use the HTML5 video syntax to provide two experiences. The preferred experience is to have the video play directly from our email; for less current email clients, the alternate, fallback experience delivers a hyperlinked graphic of the poster-frame image, which links to an online destination where the video can be watched directly in a web browser.
For more details, watch my course Creating a Responsive HTML Email and learn to create beautiful and functional emails that behave as expected—regardless of the email client in which they’re viewed.
Tags: Chris Converse, CSS, HTML Email, Responsive design
Check out these popular Web courses.
Thanks for signing up.
We’ll send you a confirmation email shortly.
Sign up and receive emails about lynda.com and our online training library:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.