How to Embed HTML5 Video in Emails | And Your Other Options
Can you embed videos in an HTML email? The answer is a little more complicated than a simple āyesā or āno.ā
There are plenty of good reasons why youād want to include videos in emails:
- Theyāre super engaging. Not only do videos grab peopleās attention, but they also help them retain information.
- Theyāre very effective. In a Wyzowl survey, 84% of people said theyāve been convinced to buy a product or service by watching a video. And 78% of marketers said that video has directly increased sales.
- Theyāre useful for explaining concepts. Videos are often the easiest way to explain things, like accomplishing a task or assembling a product.
- Theyāre great at supporting a brand. Videos with team membersā faces that highlight the culture of a brand add a human touch.
Email is one of the best ways to get content in front of people. So when you pair it with highly engaging videos, you have a powerful, effective marketing tool.
The truth is that videos usually donāt work in emails, and it can be confusing and time-consuming to figure out a good solution. But hope is not lost! There are ways to make the most of video while still ensuring your subscribers have an excellent experience.
Do videos work in HTML emails?
As with so many other things in email marketing, the answer to the question āDo videos work in emails?ā isnāt exactly straightforward. It all depends on the email client (surprise, surprise).
According to the online tool, CanIEmail.com, support for embedding videos in email is inconsistent, to say the least. Embedded video may display and play in Apple Mail and some Outlook for Mac inboxes. But even then, youāre taking a bit of a risk.
Thereās also limited support for video in some smaller clients such as Mozilla Thunderbird and Samsung Mail. But the biggest drawback for most email teams is that embedded video is not supported in Gmail inboxes. The Google initiative AMP for Email isnāt supporting video yet either.
For Gmail and many other email clients, youāll need a fallback that displays in place of the video player.
What email clients support embedded video?
| Client | Plays Video | Shows Fallback |
| AOL Mail | X | |
| Apple Mail | ā | |
| Gmail Webmail | X | |
| Gmail Android | X | |
| Gmail iOS | X | |
| Outlook 2003-2016 | X | |
| Outlook for Mac | ā | |
| Outlook Android | X | |
| Outlook iOS | X | |
| Outlook.com | X | |
| iOS Mail | ā | |
| Samsung Email | ā | |
| Thunderbird | ā | |
| Yahoo! Mail | X | |
| Yahoo! Mail iOS | X | |
| Yahoo! Mail Android | X |
*For the latest about client support for video in email, check out Can I Email.
Can you embed YouTube videos in email?
Unfortunately, no. Embedding YouTube videos requires Javascript, which doesnāt work in email. If itās not a video from your brand, create a clickable graphic or call-to-action that takes subscribers directly to the content on YouTube, or to a landing page where youāve embedded the video.
You may have noticed that if you include a YouTube link in a personal Gmail message, it creates a playable pop-up shadow box within the application. However, the video appears like an attachment at the bottom of the email, and this probably isnāt the viewing experience you want in a marketing email.
Essentially, if you are going to include embedded video in an email campaign, youāll need to host that content on your own server or content delivery network (CDN).
What video formats work in email?
HTML5 supports three main video formats: MP4 (with H.264), OGG, and WebM. It also supports GIFs and animations, which are both viable alternatives that weāll dive into a bit more later.
The H.264 codec in particular is ideal for compressing videos into a smaller file size for streaming without a negative impact on quality.
How to embed HTML5 videos in email
There are two potential ways to use HTML5 to embed a video in emails: the <object> and the <video> tag. As a reminder, email client support for both these methods is very limited.
The <object> HTML5 element defines a container for media or another external resource. Hereās an example from Mozilla using the <object> tag to embed a Flash movie.
Using <object> to embed video in email
<!-- Embed a flash movie --> <object data="movie.swf" type="application/x-shockwave-flash"></object> <!-- Embed a flash movie with parameters --> <object data="movie.swf" type="application/x-shockwave-flash"> <param name="foo" value="bar"> </object>
However, Can I Email indicates this would only be supported in Apple Mail for iOS. And of course, Flash no longer exists!
When Email on Acid first published this article, we used the <video> tag to create HTML5 code and embed this video of a cartoon bunny.
The following code expands on the basics of using the <video> element in the context of an email.
Using <video> to embed video in email
<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 clients that support embedded video will use the āposter=ā attribute as the thumbnail. The file referenced by the source (src=) tag is the actual video. As a fallback, clients that donāt support HTML5 video will render the image within the video tag that is wrapped by the <a href= >.
There are also several client-specific fallbacks that we used at the time to address certain issues in clients that support video differently. For example, Android 4 and iOS8 were rendering the video cover, but it was unplayable. So, we created a separate default playback section.
Likewise, while iOS 7 and 10 supported our video, iOS 8 and 9 rendered only an image with a play button. To remedy that problem, we used the @support declaration to target certain CSS.
The @media query ( -webkit-min-device-pixel-ratio) worked for Apple Mail and Outlook for Mac. But Outlook for Mac requires subscribers to right-click on a video to play it.
Long story short, coding an HTML email with a video is likely going to get a bit complicated and require multiple fixes and fallbacks if you want all subscribers to have the best experience possible.Ā
Hereās a look at the code for the entire email developed to display our cartoon bunny video.
Full code for embedding HTML5 video in email
<!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>
Alternatives for video in email
Itās entirely possible to harness the power of video without actually embedding video content within an email. Here are a few of the most common ways email marketers get around the issue of limited video support.
1. Image with a false play button
The simplest way to replicate the experience of an actual video in a marketing email is to simply use an image with a play button graphic on top of it. This could be as easy as taking a screenshot of the video player itself. A designer could also create a custom graphic for a more polished look.
False play buttons in emails arenāt meant to be deceiving. Theyāre a visual indicator of video or audio content on the other end of the click. Packlane used a bright, colorful play button to encourage subscribers to click and watch the video in their email.
2. Animated GIFs
Instead of a static image, many email marketers use GIFs as placeholders for videos. This brings the benefit of attention-grabbing motion to your email in a way thatās much more reliable than an embedded video.
Unlike embedded videos, the majority of email clients support animated GIFs. So, one option is to turn an important segment of your video into a GIF using software like EZGif or Adobe Spark. But even GIPHY.com has a free tool for turning videos into GIFs.
The team at The Lifelong Customer podcast used a short interview clip with captions turned on that created the feeling of a video and encouraged subscribers to click and view the content. As a bonus, the GIF also has a false play button on it.
There are a few things to keep in mind when using GIFs in email marketing. They can cause slow loading if theyāre too big or you use too many in an email. Plus, GIFs in Outlook can be problematic in some cases.
3. Animated buttons
Yet another option for adding some motion and indicating video content is an animated play button graphic. These can be placed on top of video thumbnails or used as standalone call-to-action graphics like the one below.
The play button might fade in, move, or spin āĀ but donāt get too complicated or flashy. You want just enough to get attention without being obnoxious.
You could also add an animated button, arrow, or another symbol that points directly to the video. There are a ton of creative ways to do this.
For example, Rentalcars.com included a dashed arrow pointing to their video, letting subscribers know they can “tap to play.” They also made the video super visually appealing, tucked into a holiday card.Ā
Is embedded video in email worth it?
Plenty of email marketers want to add more interactivity to their campaigns. As email evolves, itās becoming possible to do more inside of the inbox. That includes everything from taking surveys and filling out forms to adding items to a shopping cart.
While the use of video in HTML emails still lacks widespread support, being a pioneer in this area could have its advantages. It comes down to your strategy as well as the time and resources you want to spend embedding videos in emails.
When you use Email on Acidās Email Analytics, you can see which clients subscribers use to view your campaigns. If a large enough base of your subscribers uses email clients that support video, it may be worth a little extra work. But if not – there are still plenty of ways to take advantage of video content and amplify it with email marketing.
Whatever you decide to do, testing your emails and previewing them on major clients and devices is critical. The Email on Acid platform is designed to help you deliver email perfection. Find out if your fallbacks are working and see what subscribers see when you embed video in emails.
Plus, Campaign Precheck includes a host of other features that help you perfect every email before you hit send. Try it out for yourself!
This article was last updated in September 2021. It was previously updated in August 2018 and December 2017. It was first published in 2013.
Author: The Email on Acid Team
The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.
Author: The Email on Acid Team
The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.
73 thoughts on “How to Embed HTML5 Video in Emails | And Your Other Options”
Comments are closed.
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,
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).
(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.
(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.
(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
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,
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!
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
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.
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,
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 š
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.
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,
That’s not possible with media queries or any techniques I know of. Would be nice though!
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
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.
Great post! Thanks guys. Is there a way to autoplay the video? I have tried <video autoplay> but no luck.
Thanks
Eric,
No, autoplay doesn’t function at all in our testing.
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
Very nice! Unfortunately Mailchimp seems to remove all
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,
The fix we outlined above does not work for YouTube videos. It works for hosted video files.
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
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.
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
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
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
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.
Hello. excellent job. I did not expect this. This is a great story. Thanks! deddbadddabe
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
Oh, I finally found a solution (I hope) :
using max-height instead of height.
Good luck š
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/
Hi Geoff ,
Its doesn’t work under iOS 8
There is a solution for iOS8 (the video not working!!)
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,
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!
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.
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. 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/
I just sent this code to myself and the video doesn’t show up on iPhone 6 iOS8. I get the fallback. Thoughts?
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.
I’m with Mike above. I paste the code into Gmail and Outlook in HTML mode and just get the code text.
Code works on desktop but does not works on Iphone. Any ideas why is not rendering correctly on Iphone5?
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.
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.
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).
It’s very effortless to find out any topic on net as compared to textbooks,
as I found this article at this website.
I couldn’t refrain from commenting. Well written!
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.
Powerinbox also provides a good solution for video in email
http://powerinbox.com/
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…
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.
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
Good post. I am experiencing many of these issues as well..
Why video in email? When combined with email, video can help you meet your email goals. Learn more http://goo.gl/9SmChU
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.
Really interested in this thread and can see how video could help me sell my web business in a box business opportunity.
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.
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.
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.
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?
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
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 š
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.
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?
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.
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)?
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
@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.
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?
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.
The fallback work great here but I have a question for what we’re seeing on ios. When we click play on the video it pop up in full screen mode, is there a way to have the video play inside the email and not immediately in full screen? Thanks!