HTML5 Video

A How-To Guide on Embedding HTML5 Video in Email


Dec, 27, 2017 Update:
This article has been updated to address video playback quirks on Outlook for Mac.

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.

Client Plays Video     Shows Fallback
Android 4, Native Client
AOL Mail
Apple Mail *
Gmail Webmail
Gmail Android
Gmail iOS
Lotus Notes
Outlook 2003-2016
Outlook for Mac *
Outlook Android
Outlook iOS
Outlook.com
iOS 10+, Native Client
iOS 9, Native Client
Samsung Galaxy, Native Client
Thunderbird
Yahoo! Mail
Yahoo! Mail Android
Yahoo! Mail iOS
* See below for Apple Mac email clients issues
 

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="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" src="https://www.w3schools.com/html/mov_bbb.mp4" >
      <!-- fallback 1 -->
      <a href="https://www.emailonacid.com" ><img height="176" 
        src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.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="controls" poster="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" src="https://www.w3schools.com/html/mov_bbb.mp4" > 
      <!-- fallback 1 -->
      <a href="https://www.emailonacid.com" ><img height="176" 
        src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320" /></a>
</video>
</div>
<!-- fallback section initially displayed -->
<div class="video-fallback">
  <p>Fallback Content</p>
  <a href="https://www.emailonacid.com" ><img height="176" 
    src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.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

iOS 10 and above

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; }
}

Apple Mac Clients: Apple Mail & Outlook for Mac

For Mac based clients, 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; }
}

Outlook for Mac requires right click to play video

Unfortunately, Outlook for Mac has a particular quirk in that videos do not play when the play button is clicked. The reader must right click for a menu to appear followed by clicking on the Play option in the menu. Therefore it can be confusing for readers who are not familiar with this limitation.

To account for with Outlook for Mac, we have the following options

1. Display fallback for Mac based Clients

By not including the media query above, the fallback content will be displayed for Mac based clients.

2. Add Instructions in Poster Image

Since the poster image (the poster attribute in the video tag) will be displayed by default, you can add instructional text like “Right-click to play video” in it. If you do not want this text to also show up in iOS, you may want to create a separate video block with the custom poster (ie. using a different classname .video-wrapper-mac) and target the above media query just for that block.

Alternatively you can place text in a div above or below the video that is only displayed in the Apple Mac clients.

3. Autoplay

By adding the attribute autoplay=”autoplay”, you can make the video play automatically in the Mac clients. This removes the need to instruct the recipient to press the play option. However, just be aware that some recipients do not like videos that play automatically particularly if they contain loud music. Videos do not autoplay on the iOS Mail clients on the iPhone but will autoplay on the iPad if the muted attribute is set on the video. Read here for Apple’s documentation on video on iOS. The article refers to videos on the Web and not email and although the article recommends the -webkit-video-playable-inline media query, it is not recognized in iOS 10 (works on iOS 11) or the Android Samsung client.

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="controls"  poster="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" src="https://www.w3schools.com/html/mov_bbb.mp4" >
      <!-- fallback 1 -->
      <a href="https://www.emailonacid.com" ><img height="176" 
        src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320" /></a>
</video>
</div>

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

</body>
</html>

Click here to see the code in CodePen

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.

TEST TODAY!

72 thoughts on “A How-To Guide on Embedding HTML5 Video in Email”

  1. 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?

  2. @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).

  3. (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.

  4. (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.

  5. (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 (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

  6. 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

  7. @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!

  8. 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

  9. 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.

  10. 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.

  11. 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 😉

  12. 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.

  13. 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?

  14. 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

  15. 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.

  16. 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

  17. Very nice! Unfortunately Mailchimp seems to remove alltags from the template code, which makes it impossible to use this method. Boo!

  18. 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.

  19. 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

  20. 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.

  21. 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

  22. 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

  23. 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

  24. 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

  25. 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.

  26. 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!

  27. 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.

  28. 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?

  29. 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.

  30. I’m with Mike above. I paste the code into Gmail and Outlook in HTML mode and just get the code text.

  31. 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.

  32. 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.

  33. 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).

  34. It’s very effortless to find out any topic on net as compared to textbooks,
    as I found this article at this website.

  35. 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.

  36. 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…

  37. 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.

  38. 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

  39. 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.

  40. 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.

  41. 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.

  42. 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.

  43. 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?

  44. 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

  45. This worked great for IOS 10. But for IOS 11, video won’t play, there is a small rotating progress indicator, that just keeps spining forever 🙁

  46. I think the fall-back option does not work any more.

    I tested the final code (and the examples above) in all email clients, everything showed the fall-back.
    Even in all my internet-browsers I only see the fall-back.

  47. Hey Justin, thanks so much for this! I am using it on an email and testing it both Email on Acid and Litmus show the .video-wrapper and .video-fallback displaying in Yahoo! Mail. I saw the article here (https://www.emailonacid.com/blog/article/email-development/the-new-yahoo-mail-and-how-to-target-it) about the new Yahoo! Mail being more helpful with display:none but nothing I seem to do is making a display:none work in Yahoo! Mail for this .video-wrapper div. Any way you can look into this?

  48. This article has been updated to address Outlook for Mac. 

    @unitydigital I don’t see any issues with Yahoo! Mail but feel free to chime in if you still see it happening. Make sure you copy the code from the section under “FULL CODE” when you’re testing.

  49. This may be a dumb question, but how do I use this when I don’t have access to edit the HTML head (like in Gmail)?

  50. HI, I have been playing around & trying to add video to emails. The fallbacks appear to work pretty well however I am having issues with the video playing in IOS 11.2.2 – I am getting a loading spiral indicator. Ari I see that you had the same issue – did you manage to resolve? Doesn’t else have any tips? Thanks

  51. @Elaine, I’m still having same issue with videos & iOS (11.2.5 now). I have noticed that when I open message with video first time, I just get the spinning indicator forever. But if I quit the email app (ie. double click home & swipe it away) and open message again the video works.

  52. Great updates Justin! Everything is working great.

    Has anyone been able to figure out a way to track plays? I’m wondering if using CSS pseudo selector might fire on click or hover, which could help better infer plays. Alternatively, wondering if the MP4 hosting service might be able to provide play stats.

    Anyone figure this out yet?

  53. Most of the cheap SEO bundles are merely search engine marketing services that use software for the automatic entry of your own websites to varied search engines, something which is useless.
    This is only because obscure search engines are not capable of bringing
    targeted traffic to your site, and that means you ought to concern yourself with
    the major search engines. Your site doesn’t have to be filed to some search engine as it can finally be indexed through the backlinks which the SEO expert has gained for you personally.

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies