Join Chris Converse for an in-depth discussion in this video Adding HTML5 video into HTML email, part of Creating a Responsive HTML Email.
…Now we're going to take a look at how we can incorporate HTML5 video into an email.…So let's go back to the exercise files and…back into the folder on the desktop called My Email.…Inside of our project, let's create a brand new folder called Video.…And then let's go back to the exercise files, inside of Folder Four.…Let's grab a copy of the JPEG and the MPEG-4.…Now I'm going to Option drag a copy of these into the My Email folder.…You can also use cut and paste. Once these are in place,…let's switch back to our email.html file in a text editor.…Now inside of our email, the first thing we're going to do,…is get rid of the promos and replace that with the video.…
So let's scroll down here, and let's find the td that's holding both of the promos.…So we can see here promo 1 and promo 2.…Let's come in here and delete promo 1. Then we'll delete promo 2.…And once those are removed, we're going to add an HTML5 video tag.…So first, we'll start by adding…a video tag, then a space.…We're going to set the width to 570 pixels.…
This course was created and produced by Chris Converse. We are honored to host this content in our library.
- Creating the graphics
- Setting up the base layout structure
- Styling the table rows for the headline, banner, etc.
- Creating buttons
- Adding CSS media queries
- Styling the content
- Incorporating animation and web fonts
- Validating your code
- Testing in various email clients
Skill Level Beginner
Q: What are the sizes of the images used in this course?
Q: This course was updated on 11/26/2013. What changed?
A: We added two new movies to Chapter 5, "Adding HTML5 video into HTML email" and "Encoding and embedding base64 images."
Q: This course was updated on 12/03/2014. What changed?
A: We added one bonus movie, "Using high-definition graphics in your HTML email."