Click to Sign Up for a 7 Day Free Trial!

Email Development

A How-To Guide on Embedding HTML5 Video in Email

Email On Acid

Feb, 22, 2017 Update:
This article has been updated to address the changes in email clients since it was written in 2013.

This article will teach you how to embed HTML5 video so that it can be played in email clients that support video in email, specifically Apple Mail, iOS 10 and the Samsung email client. It will also cover various fallback techniques so that alternate content is displayed in the clients that cannot play video.

Click here to see the full code

Email Client Support

As you can see from the table below, support for HTML5 video is still limited but the clients that do support it represent over half of the market share. Email applications, like the native iOS client, Apple Mail and the Samsung email client will allow recipients to play your video within the email client itself. Other clients like Gmail and the Android devices will display a fallback image.

ClientPlays Video    Shows Fallback
Apple Mail  
Lotus Notes
 
Outlook 2003-2016
 
Thunderbird  
iOS 10, Native Client  
iOS 9, Native Client
 
iOS Gmail
 
iOS Yahoo! Mail
 
iOS Outlook
 
Samsung Galaxy, Native Client  
Android 4, Native Client
 
Android Gmail
 
Android Yahoo! Mail
 
AOL Mail
 
Gmail
 
Yahoo! Mail
 
Outlook.com
 

Basic Video Code

The following is the basic video code. Clients that will be able to display and play video will use the poster attribute as the cover image for the video and the file referenced by the source tag as the video. Clients that don't support video will render the image within the video tag that is wrapped by a link.

<video width="320" height="176" controls poster="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <!-- fallback 1 -->
      <a href="http://www.emailonacid.com" ><img height="176" 
        src="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_backup.jpg" width="320" /></a>
</video>

Email Specific Fallbacks

However, as is the case with email, many email clients don't play ball. Certain clients such as iOS 8 and Android 4 will render the video cover but the video remains unplayable, potentially causing confusion to the recipient. Thus, the safe bet is to display a separate fallback section by default and then only display the video section in clients that are able to play video like the code below.

<!-- video section initially hidden -->
<div class="video-wrapper" style="display:none;">
  <p>Video Content: MP4</p>
<video width="320" height="176" controls poster="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <!-- fallback 1 -->
      <a href="http://www.emailonacid.com" ><img height="176" 
        src="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_backup.jpg" width="320" /></a>
</video>
</div>
<!-- fallback section initially displayed -->
<div class="video-fallback">
  <p>Fallback Content</p>
  <a href="http://www.emailonacid.com" ><img height="176" 
    src="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_backup.jpg" width="320" /></a>
</div>

Since Yahoo! Mail strips display:none inline, you also need to add this to the <head>:

<style>
 .video-wrapper {display:none;}
</style>

Displaying Video in Clients That Support Video

Apple Mail

For Apple Mail, we can use the -webkit-min-device-pixel-ratio media query to enable video. However we also need to prevent the video from displaying in iOS 8 clients that match that media query but does not play video. The fix is to add a min-device-width query that is wider than the iPad's email client device width. Interestingly, this media query will activate on AOL Mail (that does not support video) for webkit browsers such as Chrome and Safari, but luckily, AOL Mail will simply display the fallback image and link that is embedded within the video tag.

@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px) 
{
  .video-wrapper { display:block!important; }
  .video-fallback { display:none!important; }
}

iOS 10

Video was supported in the iOS 7 email client but was removed in iOS 8 and 9. Apple then added video support back in iOS 10. Unfortunately, in iOS 8 and 9, the email client would still render the video with a play button but not play the video! We need a way to only show the video content in iOS 10. Our friend Remi Parmentier discovered a clever method to only display video in IOS 10 using the @supports declaration. It targets certain CSS that iOS 10 supports but not iOS 9. Read here for his explanation.

However, Yahoo! Mail does not like the @supports declaration and will expose any CSS within the block in the Webmail. (Yahoo! Mail used to break media queries as well but that has been fixed - see this article for background). To ensure the CSS within the @support block are not activated in Yahoo! Mail, I use the "starts with" (^=) attribute selector that Yahoo! Mail strips (it allows regular attribute selectors).

@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
  div[class^=video-wrapper] { display:block!important; }
  div[class^=video-fallback] { display:none!important; }
}

Samsung Email Client

Although not frequently discussed, the Samsung email client that comes pre-installed in the Galaxy line of phones supports video. If you want to display video within the client you can use the following CSS:

#MessageViewBody .video-wrapper { display:block!important; }
#MessageViewBody .video-fallback { display:none!important; }

Full Code

<!doctype html>
<html>
<head>
<title>Video in Email Test</title>
<style type="text/css">
 .video-wrapper {display:none;}
 @media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px) 
 {
  .video-wrapper { display:block!important; }
  .video-fallback { display:none!important; }
 }
  @supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
    div[class^=video-wrapper] { display:block!important; }
    div[class^=video-fallback] { display:none!important; }
  }
  #MessageViewBody .video-wrapper { display:block!important; }
  #MessageViewBody .video-fallback { display:none!important; }
</style>
</head>
<body>
<B>Video in Email Test</B><BR>

<!-- video section -->
<div class="video-wrapper" style="display:none;">
  <p>Video Content</p>
<video width="320" height="176" controls poster="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">

      <!-- fallback 1 -->
      <a href="http://www.emailonacid.com" ><img height="176" 
        src="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_backup.jpg" width="320" /></a>
</video>
</div>

<!-- fallback section -->
<div class="video-fallback">
  <p>Fallback Content</p>
  <a href="http://www.emailonacid.com" ><img height="176" 
    src="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_backup.jpg" width="320" /></a>
</div>

</body>
</html>

Video Formats

HTML5 supports three main video formats: MP4, OGG and WebM. Due to intellectual property issues, Apple decided to only support MP4 in their browsers and email clients, hence that's the only format I'd recommend using for video in email.

You should also ensure that your server is configured to output the correct MIME type so that the email client is able to detect the proper video format when retrieving the video. Check out this article for more details. If you are using the Apache Web server, ensure that this entry is in your .htaccess file.

AddType video/mp4 .mp4 .m4v

Should You Use Video in Email?

Although embedding video in email is not difficult, it is not exactly trivial either. Some email marketers advocate for just displaying a fake play button on an image and having that open the browser to a landing page that hosts the video. Others prefer displaying an animated gif converted from a video since animated gifs are supported in all email clients except for Microsoft Outlook.

Personally I think it depends on your audience and your brand. Having a video play right in the email client can add a wow factor to your newsletters and if you use video a lot, the experience of having the video play without taking the user outside to a browser may make your recipients more likely to play the video. Either way, its your call!

If you've decided to use video in your email, make sure that you verify that your email will render nicely across the most popular email clients. Email on Acid can help you test your email across these clients in seconds.

Big Thanks to Big Buck Bunny!

This video was used for testing coutesy of Big Buck Bunny.

What are you going to do with HTML5 video in your next email? Let us know in the comments below.

About the Author

Justin Khoo

Justin Khoo

Justin Khoo (@freshinbox) is an email developer and writes about email techniques and new innovations. He has been involved in many aspects of email over the past decade, everything from building webmail clients and email campaign services to coding HTML emails.

Join the Discussion

This is great, I can see videos in emails really helping to increase conversion rates.

However, since you have to download the video to play it, won't this be fairly painful for mobile data limits, if you are downloading on 3G?

Would you suggest only including short videos (less than 30 seconds) rather than ones that are a couple of minutes long?
Sarah
@Sarah,
Yes, in general I would advise including shorter videos in your email marketing. This will help viewers make it to the end of the video as well. You can use this to introduce a customer to videos you host on your site (which may include longer ones).
Geoff Phillips
(sorry for long comment - this is part I of III)

Couple of things: first, I always love to see people talking about embedding video in email. Senders have tried to use embedded video in email for years and when I see articles like this, it reinforces the idea that embedding video in email is now possible. So my overall reaction is highly positive. Senders are thirsty for this information, and I think this approach gets senders 50% of the way there.

I did want to point out a couple of things about this code - it is a bit self-serving but I think still represents a technically useful perspective so I hope you allow my comment to go live.

1) The Android approach here is on the right track, but it's not comprehensive enough to cover the 3,500+ Android devices in existence. A more comprehensive tag is needed to ensure Android compatibility. It should also be noted that the general Android approach here does come with a sacrifice: Windows Phones (Nokia in particular). The sacrifice is worth making for most senders, but senders should be aware of it. The Nokia phones don't handle the DIVs properly.

2) This code doesn't solve a major issue with a very popular webmail client, Outlook.com. When Outlook.com is opened in any browser other than Chrome functioning player controls in the mail client don't render. The solution is to serve a custom poster image with a "right click to play" message. The only way to accomplish this is to use device/client detection and to serve a custom asset.
Justin Foster
(part II of III)

3) This code doesn't solve the "analytics issue," which many practitioners would argue is even more important than being able to embed video in the first place. Senders need to know how many people are clicking to play the video, how many recipients are served video, and how many are served a backup asset. This is especially true when a primary goal of the mailing is to drive video views. Since clicking embedded video within a mail client doesn't result in a clickthrough event, the only way to solve the problem is to use custom click-tracking infrastructure that is able to sense whether a video's been played based on how it is being requested from the server.

4) This approach relies on a 2-tier waterfall model where video always fails over to an image. In my experience, senders generally prefer a 3-tier waterfall model, where video fails to an animated .GIF video, and if .GIF can't be served, then a static image is served instead. The reasons senders generally prefer the 3-tier model are twofold. First, it tends to drive higher click rates (we observe an average 15% uptick when serving .GIF videos vs. static images with play button overlays) and second, it generally creates a more dynamic experience in the inbox. Although it is possible to fail over to a .GIF animation using this code example, it's not desirable because senders are forced to use the first frame of the GIF as the default image. That is a problem solved by device/client detection. The second reason it's undesirable is that some mail client will force the download of the .GIF before displaying the first frame, which then introduces an experience challenge. That problem is solved by device detection as well.
Justin Foster
(part III of III)

5). Finally there is the issue of generating all the necessary assets. While creating OGV and MP4 video files is a great start, it's not enough. This is due to mobile being so important. A more comprehensive approach that creates variable bitrate and resolution video files is desirable to create the best cross-device experience. Plus, if using a .GIF video, there's that asset. And custom poster assets. And the image. Most folks don't realize the number of assets that are required to deliver a truly seamless experience. This is where automation software can really benefit senders.

If you've read to this point in my insanely long comment (congrats, you deserve a prize), you probably figured out by now that I'm plugging something here. What I'm plugging is VideoEmail (http://www.videoemail.com). VideoEmail solves the I've mentioned. Plus it's just way easier to use for web developers in general. And, it's surprisingly cost-effective for most senders. I hope you allow this comment to be posted. I think it is a valid perspective, although it is, as admitted at the beginning, a bit self-serving.

- Justin
Justin Foster
Sarah,

Most mobile devices don't fully download the video to play it. Depending on the device and size of the video file, an amount of the video file (usually 100 - 500kb) would "pre-buffer" prior to the video being available for playback, with most buffering closer to 100-200K). If you look at the video here, this pre-buffering is the reason there is a slight delay on the iPhone before the play button appears on the video. So, in general, it's not a big issue with mobile in terms of bandwidth consumption.

Justin
Justin Foster
@Justin,
Thank you for posting! Sorry it took me so long to get back to you.
1) Which Android devices specifically don't fit within our query?
2) Actually, this can be fixed using a special class that Outlook.com applies to all emails. Check it out in the revisions above!
3) That's very true, and for some marketers it's going to be a deal breaker.
4+5) Both great points. Your 3-tier approach does solve some problems with embedding video in email, and automation in creating the assets would be welcomed by many users. Very cool!

If any of our users reading this do give Justin's service a try, please let us know what you think!
Geoff Phillips
Hi Geoff,
As I am not an expert I can not go into details, for me its awesome I copied your code in Dreamweaver, and it worked well.

As I told you I am not an expert (specially in coding) can you guide me for 2 more things

1- in your code where to Edit to place my own video?

2- once the code is done how can I use it for my email campaign, usually what I do I make an HTML upload it on server along with the images, then open the HTML in browser, Copy All, and Paste All in Email window (it works for both Gmail and MacMail)

Kindly Advise, how to use this code for any email campaign.

Thanking you in anticipation
vdeziner
Hi Geoff -

Sorry for the long delay in responding. Here are responses to your questions/comments:

1) Which Android devices specifically don't fit within our query?

2) Actually, this can be fixed using a special class that Outlook.com applies to all emails. Check it out in the revisions above!

>>> I think on this one we may have to agree to disagree. For me (and I think for most marketers), removing video capabilities from playing within Outlook.com isn't really a "fix" so much as it is just another example of sending email back in time and preventing the channel from blossoming with innovations like video. In my view, senders that want to reach people using Outlook.com with video can and should show Outlook.com users HTML5 video. The only way to ensure a good experience is to detect the mail client and serve a custom poster.

3) That's very true, and for some marketers it's going to be a deal breaker.
4+5) Both great points. Your 3-tier approach does solve some problems with embedding video in email, and automation in creating the assets would be welcomed by many users. Very cool!

>>> Thanks again for the cool article/primer. For me, the more people who are talking about embedding video in email, the better. It's definitely possible, cool, and can generate some great results.
Justin Foster
This is really awesome, thanks. A question... is it possible to play videos that are hosted on YouTube? I know you can do some funky Chromeless stuff, but I don't know how that relates.
Dan
Dan,
We didn't experiment with that. Other than linking to the video, I'm not sure how you'd add that to an email. Justin might have some more insight here wink
Geoff Phillips
It is not possible to embed YouTube videos in email. The YouTube player relies on JavaScript which isn't supported in email. It's possible to download a YouTube video and then use the source file in email. It's also possible to place a YouTube link in email. Doing so will display a clickable thumbnail of the video atop the email in outlook.com, and directly below the email in Gmail. In both cases, clicking on the thumbnail would play the video in an overlay on the page without directing the viewer to YouTube.
Justin Foster
One more question. Say I want to have a video, then under the video a buy button. BUT... if the video doesn't play, then I don't want the buy button either. Is that possible? How?
Dan
Dan,
That's not possible with media queries or any techniques I know of. Would be nice though!
Geoff Phillips
This is possible using client detection, which is the same mechanism I recommend for solving the Outlook.com playback issue. Using client detection, the email client is detected at the moment of open by client detection software. If the detection software determines the mail client is unable to play video, then an alternative image is served in place of the button with "BUY" text on it. For example you could display a black box as the image, or replace the image that says "BUY" with an image that says "LEARN MORE." Keep in mind though that although it's possible to replace the image, it's not possible to remove the URL the image links to. Therefore, if you have the BUY image linked to a product page, even if you replace the BUY image to a blank black image, it will still be linked to the same product page. That's because images can be changed within the email after it's sent, but links can't be changed.

PS I am curious as to why you would want this functionality. If you can't display the video, would you not want the person to buy the product? Keep in mind you can't link through embedded video in email to your website. So I generally recommend displaying BUY buttons or other calls-to-action around the video player, whether or not the video can actually play back within the message,

Justin
Justin Foster
Subsequently, after spending many hours on the internet at last We've uncovered an individual that definitely does know what they are discussing many thanks a great deal wonderful post.
update my android
Great post! Thanks guys. Is there a way to autoplay the video? I have tried <video autoplay> but no luck.
Thanks
Eric Lepetit
Eric,
No, autoplay doesn't function at all in our testing.
Geoff Phillips
Yes, autoplay can function, albeit only in certain mail clients. For example, no mobile device supporting embedded video will allow auto-play in the native client. However, Autoplay is supported in Outlook.com. I believe also Outlook 2011(Mac) and Apple Mail 4+ but I will double check those. When auto-playing embedded video in email the best practice is to have the video auto-play with sound off by including a MUTE option set to ON. The format is like this: <video autoplay="autoplay" muted="muted">

Justin
Justin Foster
Very nice! Unfortunately Mailchimp seems to remove all <source> tags from the template code, which makes it impossible to use this method. Boo!
alex
Ok so im trying to understand. copy the code insert the you tube video code right where it says and the outlook fix where it says. Then copy that. Click new e-mail paste all code in body of test e-mail then e-mail to myself and all I get is the code. Just don't really know where to paste your code I guess.
mike Cipriano
Mike,
The fix we outlined above does not work for YouTube videos. It works for hosted video files.
Geoff Phillips
This is a response to the Mailchimp comment from above. I would be surprised if this were not a user changeable setting within the Mailchimp UI. We have found a couple of ESPs that, by default, attempt to "fix" HTML email messages. I've seen this function strip out the source tags in 2 other ESPs (Convio was one, can't recall the other). In both cases, the issue was fixed by disabling either a message-specific setting or disabling HTML auto-correction at the account level.

Any ESP that doesn't allow its users to send out unadulterated HTML, provided there is no Javascript in the message, is, in my opinion, doing a disservice to its customers.

Justin
Justin Foster
Thank you for this fix
تحميل برامج ايفون
Thanks very much for the article and the list of supported email clients.

I am pretty sure that in a year or two the list will be much better in terms of support.
Elemental Web Solutions
This comment is in reference to MailChimp not supporting embedded video in email. We have verified this claim is incorrect; in fact MailChimp does allow embedded video in email. To use embedded video within MailChimp, follow one of the following processes:

1) Import your finished HTML template directly into MailChimp and do not edit the template with the MailChimp editor.

2) Copy/paste the embed code for the embedded video into a content block within a MailChimp template, chosen with the MailChimp editor, and do not re-open that content block to edit the cell containing the video.

MailChimp's content editor will strip the <video> tag and other elements of the tag IF a user loads the embed tag into their editor, closes the editor, then re-opens the editor to make any changes. Based on use of MailChimp it appears this is a designed capability - though a poor design choice, IMO - rather than a bug. Hope this helps.

Justin
Justin Foster
I've read some excellent stuff here. Definitely price bookmarking for revisiting. I surprise how much effort you place to create this type of great informative site. afbeabbceded
Johnk927
I like this site its a master peace ! Glad I observed this on google. The definition of a beautiful woman is one who loves me. by Sloan Wilson. bedkadeagkdf
Johnd245
http://www.DirectIQ.com is yet another user-friendly email marketing service which lets me send video emails and supports HTML5 video embed markup. I love their dashboard for other reasons though.
Fabien Charpagne
Hello. excellent job. I did not expect this. This is a great story. Thanks! deddbadddabe
Johnd232
Hi Geoff,

Thank you for your awesome work.
I passed some minutes to test a Gmail bug that create a white-space under the video division.
The video tag and sources are replaced by "u" tag and the alternative-video content is displayed.

But the "android" division keep its height because of an automatic replacement of height by min-height. Gmail automatically replaces height by min-height even if you already declare a min-height.

I'm looking for a solution.
Thank you !
Geoffrey
Geoffrey C.
Oh, I finally found a solution (I hope) :
using max-height instead of height.
Good luck wink
Geoffrey C.
There is a VERY important update to this article. The method above is no longer workable, due to iOS8 not properly handling HTML5 video players. I've blogged about it over here on the video-commerce.org site: http://video-commerce.org/2014/10/ios8-rocks-the-world-of-embedded-video-in-email/
Justin Foster
Hi Geoff ,
Its doesn't work under iOS 8
yshnaper
There is a solution for iOS8 (the video not working!!)
yshnaper
hello,

First of all, excuse my bad english: /
I return to this article with a few questions:

In the example the video has no content below.
The android div creates white space underneath the image is hidden but the block is present (physically).

When we still have the contents below the video this creates a blank space (in my case the video is 600px x 340px, imagine the size of my background ... Yes I know it's crazy but try to explain this to my graphic when trying to animate their creation T__T)

So I removed the div android (I have not tested on android) and I have more space. Great for gmail, yahoo my biggest "clients" by cons on outlook.com nothing appears.

So I deleted the instruction ".ExternalClass div.video_holder"
And it works on firefox and chrome outlook.com (except internet explorer when I empty content)

So I handed ".ExternalClass div.video_holder {display: block! Important;}" ie to and finally I still have the same problem: a white space (random size)

I have not yet tested on iphone but it should work.

Finally, my experience I draw a lot of frustration: how to manage all browsers / versions of browsers / devices (mobile and tablet) and applications?

Lots of tests and work for the chance to hear "On my email / application / workstation (etc ....) it does not work."

So it is not easy to know the return on investment to send a video email and therefore whether it is worthwhile.

Sorry for being long but I think it is also important not to put that code but to share feelings and difficulties with this type of work. For it is interesting to a video, but it requires so much anticipation in terms of development, video resources, I wonder if today is really profitable.
Greg
Greg,
Yes, it can be very frustrating!

I am not sure what to tell you about the white space except to keep testing and trying new fixes.

As far as making it work on all devices/applications, I think your best bet is to show an image as a fallback.

Good luck, and happy testing!
Geoff Phillips
I have a question as someone who is totally ignorant to the topic, but has been assigned by her boss to "find out how to embed videos into emails".

We currently use Get Response for our email marketing. My boss now wants to be able to send a video out with the email, but Get Response only provides the ability to link videos.

He has been using Dropbox as his method for storing the videos and therefore sharing videos with clients/prospects. However, now he has decided that he doesn't want anyone to be able to download the video when he shares it. Dropbox provides an easy "download button" which he doesn't want anyone to have the option to do.

So my question is two fold. First, aren't all videos that are shared in any capacity, whether it be by direct link to a video sharing website (are there any that are preferred/recommended?) or by directly embedding into an email (which I'm clueless on bc I don't code) downloadable? And two, what would you recommend I do in this situation? Learn to code?

Thank you so much for any help you can provide.
Cana
I've tested a different methods for embedding video in e-mail. The above one aswell. But the video does not play on iPhone (native). I guess something has changed since a past update.
Can anyone confirm that?
Daniel
Daniel. Yup, you're right. See my comment above and this article: http://video-commerce.org/2014/10/ios8-rocks-the-world-of-embedded-video-in-email/
Justin Foster
I just sent this code to myself and the video doesn't show up on iPhone 6 iOS8. I get the fallback. Thoughts?
Jason
Jason,
Sorry, this technique does not work with iOS8. We may come out with another blog on this topic to address iOS8 at a later time.
Geoff Phillips
I'm with Mike above. I paste the code into Gmail and Outlook in HTML mode and just get the code text.
eric buck
Code works on desktop but does not works on Iphone. Any ideas why is not rendering correctly on Iphone5?
Velazq
Velazq,
As mentioned above by Justin Foster, this technique doesn't work in iOS8. I believe he posted a link to an article about this.
Geoff Phillips
I have a quick question. I would like the video to continue playing from one page to the next. Is there a code that can make that happen? When I test my site I'm creating and click over to the next page, I have to start the video over.
Shawna L Higel
La función Smart Lock de Android te permite resguardar tu teléfono tablet vinculándolo
con un dispositivo de confianza (como un wearable incluso tu coche).
Julian
It's very effortless to find out any topic on net as compared to textbooks,
as I found this article at this website.
domace vijesti
I couldn't refrain from commenting. Well written!
oklejanie witryn
Justin and the folks he works for at Realtime Email/LiveClicker have made some big changes, especially when structuring their services. Now the minimum number of emails you can get per month is 20,000 for $750. That's got to cut out a lot of smaller businesses who could have helped get their services used more. That pretty much leaves it up to the spammers, which means that video in emails is now at a dead-end road, for small business.
GAry
Powerinbox also provides a good solution for video in email
http://powerinbox.com/
Yaniv
What's the latest on this one? Is it still possible to embed videos in Apple Mail and Outlook? I'd love to get some videos in emails I'm currently working on but am really struggling...
chriscottrell.cottrell
Sorry to come late to the party. However, my company just signed a contract with Liveclikcer. We were excited to know that we could send video emails to IOS users who are our subscribers. Well, after some trial and error, as well as custom coding, we cannot get video to play in the native IOS devices period. Being on a Mac, I see the emial fine in Outlook. But after reading that the newer IOS platform does not support HTML5 video, it take the Mickey out of why we even got the ability to finally send video emails. If any one has a work-around or can direct me to some further reading, eventhough I think I pretty much found the answer of "You're S.O.L pal" on this. Thank you in advance folks. Happy Coding.
ArtChapTX
Hi ArtChapTX,

This is Justin from Liveclicker. HTML5 video ceased to be supported in the native iOS mail client with the release of iOS8. I actually broke this news here, on Liveclicker's site, as well as how Liveclicker worked around the issue:

http://realtime.email/blog/ios8-rocks-the-world-of-embedded-video-in-email/ and http://www.realtime.email/new-video-embed-tag-for-ios8/

You can also see the list of supported mail clients and expected behavior here:
http://www.realtime.email/wp-content/themes/RTE/assets/img/supported-email.jpg (click http://www.realtime.email/solution/ to access from site)

Feel free to contact me directly with any questions justin at liveclicker dot com, or contact your account manager. Happy to help.

Justin
Justin Foster
Good post. I am experiencing many of these issues as well..
Augustus
Why video in email? When combined with email, video can help you meet your email goals. Learn more http://goo.gl/9SmChU
George
Appreciating the commitment you put into your site and detailed information you offer, but when i actually tried to code my own email template using all the information given above i was unable to do it and after trying it for few hours i ended up with a messed up design which was not working good in email platforms as well. Then i google a bit and found an awesome website called http://www.TemplateBhai.com From there i downloaded 2 free templates, well coded and even i was having PSD to make the changes in original banners. I literally executed the campaign in less than 15 minutes. Its heaven for marketers.
Alex John
Really interested in this thread and can see how video could help me sell my web business in a box business opportunity.
David
Doesn't seem to work for the current generation of Android mail clients (Galaxy). Displays a block with a circle and triangle, but doesn't show video when clicked. The timeline below also only shows a triangle and a 0:00 with a line after.
Gary
Doesn't seem to work with the Gmail app in combination with the online version of the mail. The current version of Gmail opens the fallback url in the app by default. Not in the browser. There it still shows the fallback.
Maxcym
One thing that should probably be addressed is how Outlook for Mac (both 11 and 16) responds to this code:

Controls do not render on Outlook for Mac at all, including a play button in the center of the video. The video can only be played by right-clicking/control+clicking on it and selecting play. I've been unsuccessful in finding a way to specifically target any Outlook for Mac client, so I can't create a fallback or OL for Mac-only instructions. Has anyone else had an issue with this, and if so, is there a fix?

Also, if you merely leave "controls" as its own attribute without assigning a value to it then it will break the rest of the tag; with the code supplied here it ignores the poster and only renders a black screen (this also seems to happen in Apple Mail, however I'm not sure in which versions). You will need to change it to controls="controls" to have the poster display and any other attributes be valid.
Kevin
This technique is working perfectly in all major email clients except on the Outlook app for iOS. Any ideas for a possible solution. I was thinking outlook conditional targeting to add a static image, but then the video won play in Outlook mac desktop. Any way to target just the Outlook app?
Sean
I've tested a different methods for embedding video in e-mail. The above one as well. But the video does not play on iPhone (native). I guess something has changed since a past update
email support

Leave a Comment