How to Embed HTML5 Video in Email - Email On Acid (2023)

How to Embed HTML5 Video in Email - Email On Acid (1)

73

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?

ClientPlays VideoShows 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.

How to Embed HTML5 Video in Email - Email On Acid (2)

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.

How to Embed HTML5 Video in Email - Email On Acid (3)

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.

How to Embed HTML5 Video in Email - Email On Acid (4)

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.

How to Embed HTML5 Video in Email - Email On Acid (5)

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.

(Video) How to Insert and Send HTML Email Newsletters in Gmail

How to Embed HTML5 Video in Email - Email On Acid (6)

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.

Don’t guess, test

Email clients are constantly changing, which is why it’s important to test your email every time; what worked yesterday might not work today. Email on Acid offers unlimited email testing in major mailbox providers and the most popular devices. That means you can make sure your email looks good before it hits the inbox. Want to see for yourself? Take advantage of our free, seven-day trial.

Test Today

How to Embed HTML5 Video in Email - Email On Acid (8)

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.

  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!

    (Video) How to Send HTML Email Newsletter Templates with Gmail

    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. Dan,
    That’s not possible with media queries or any techniques I know of. Would be nice though!

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

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

  17. Great post! Thanks guys. Is there a way to autoplay the video? I have tried <video autoplay> but no luck.
    Thanks

  18. Eric,
    No, autoplay doesn’t function at all in our testing.

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

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

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

  22. Mike,
    The fix we outlined above does not work for YouTube videos. It works for hosted video files.

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

  24. Thank you for this fix

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

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

    (Video) Complete Html email template tutorial series part 2

    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

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

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

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

  30. Hello. excellent job. I did not expect this. This is a great story. Thanks! deddbadddabe

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

  32. Oh, I finally found a solution (I hope) :
    using max-height instead of height.
    Good luck 😉

  33. Hi Geoff ,
    Its doesn’t work under iOS 8

  34. There is a solution for iOS8 (the video not working!!)

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

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

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

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

  39. I just sent this code to myself and the video doesn’t show up on iPhone 6 iOS8. I get the fallback. Thoughts?

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

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

    (Video) Webinar: Awesome Email Designs Anyone Would Love | Email on Acid

  42. Code works on desktop but does not works on Iphone. Any ideas why is not rendering correctly on Iphone5?

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

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

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

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

  47. I couldn’t refrain from commenting. Well written!

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

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

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

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

  52. Good post. I am experiencing many of these issues as well..

  53. Why video in email? When combined with email, video can help you meet your email goals. Learn more http://goo.gl/9SmChU

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

  55. Really interested in this thread and can see how video could help me sell my web business in a box business opportunity.

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

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

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

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

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

  61. 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 🙁

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

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

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

  65. 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)?

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

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

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

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

    (Video) Notes from the Dev | Episode 3 | Faster HTML Email Coding with Emmet

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

Comments are closed.

FAQs

What is the best way to embed a video in an email? ›

Here's how:
  1. Copy the video URL. For example, a URL from YouTube or a trackable video URL from Biteable.
  2. Click the “link” icon in Gmail.
  3. Past the video URL into the web address box.
  4. Send the email. The video displays as an embedded video at the bottom of the message.

Can you use HTML5 in email? ›

HTML5 is not yet fully supported in all email clients. The following chart demonstrates where precisely it works and where a fallback image will load instead. Overall, it's not as bad as it seems. The supported browsers account for about 50-60% of devices capable of receiving emails.

How do I embed an HTML video into an Outlook email? ›

When you're trying to embed video in an Outlook email, start by opening your video. Then click the URL, right-click, and select copy. Next, create the email and paste your link into the email body. You can also try the BombBomb Add-In for Outlook 365.

Can you embed HTML in an email? ›

You can embed HTML in email with the 'Insert as Text' option. Select 'Insert' > Attach File > Select the htm. file > Click on 'Insert' dropdown bar > Select 'Insert as Text'.

Can you embed HTML form in email? ›

Yes, you can embed HTML content into an email if it supports HTML elements, but online forms are not exclusively HTML built. Even though you succeed in embedding your online form into an email, chances are the end-user will not be able to submit it at all.

Is it possible to embed a video in an email? ›

Finally, some email clients do support embedded video. If you feel it's the right strategy for your subscribers, you can embed a video within email using HTML5. If the video isn't supported, your subscriber can see a static image linking to another page, instead.

What is the best format to send a video by email? ›

MP4 (MPEG4/H. 264) is the most compatible video format supported by almost all players and portable devices with compact file size and lower data rates but retaining a level of quality becoming the perfect format for uploading to email which limits size of attachment.

How do you properly embed a video? ›

Embed videos & playlists
  1. On a computer, go to the YouTube video or playlist you want to embed.
  2. Click SHARE .
  3. From the list of Share options, click Embed.
  4. From the box that appears, copy the HTML code.
  5. Paste the code into your website HTML.

How do I make an email link in HTML5? ›

How to make an email link in HTML
  1. Open your HTML file and choose where to insert your email link.
  2. Type in the anchor tag "a href=" after the "<" symbol to show a link in your HTML code.
  3. Include the "mailto:" tag after the "=" to send the link to an email address.

How do I send HTML content in an email? ›

Let's Insert HTML into Gmail
  1. Grab the code that you saved as an HTML file and open it in your browser of choice. ...
  2. From there, you simply need to copy the HTML as it has rendered in the browser.
  3. Paste that into your new Gmail compose window.
  4. Press send, and then you're all done.
12 Nov 2020

Does Gmail use HTML5? ›

Gmail uses the HTML5 DOCTYPE

This is because Gmail renders all emails using the HTML5 DOCTYPE.

Can I embed a video into an Outlook email? ›

Yes, you can embed video in outgoing Outlook emails! However, there is 1 thing to should know: Only Microsoft Outlook for Mac supports playing embedded videos in-line. All other Outlook clients (Outlook for Android, Outlook for iOS, and Outlook.com) will show a fallback image instead of your image.

How do I embed an HTML file in Outlook? ›

Here is the workaround:
  1. open a new email.
  2. locate File > Options >Quick Access Toolbar.
  3. add Attach File to Quick Access Toolbar.
  4. open Attach File via Quick Access Toolbar and the Insert as Text option will reappear.
12 Feb 2021

How do I embed content in an Outlook email? ›

Attach a message or other item to a message

On the File menu, click New, and then click Mail Message. On the Message tab, in the Include group, click Attach Item. In the Look in list, click the folder that contains the item that you want to attach. Click the item that you want, and then click OK.

Can I embed HTML in Gmail? ›

Copy & Paste HTML into Gmail

If you write HTML code in an editor and then simply copy and paste it in the Compose window on Gmail, you will get back straight code. That's because that window relies on the WYSIWYG editor, as mentioned above.

How do I embed a video in Gmail? ›

How to Embed Video in Gmail?
  1. Step 1 - Select Video to be Shared.
  2. Step 2 - Find Shareable Link.
  3. Step 3 - Paste Link in Gmail & Add as Link.
  4. Result - Video Added to Gmail (at bottom)
12 Jan 2021

Can I put HTML code in Gmail? ›

How To Embed HTML in GMAIL Email - YouTube

How do I embed a form in an email? ›

Here's how to embed a Google Form in an email:
  1. With your form open, click “Send” in the upper right-hand corner of Google Forms.
  2. A “Send form” will appear. Enter the recipient's email address and customize the subject line and message.
  3. Finally, check the box that says “Include form in email.”
21 Apr 2021

What is HTML format for email? ›

HTML, which stands for HyperText Markup Language, is a way to code a document (made out of ASCII text) that lets an HTML reader (such as a web browser) know how to render certain types of information. HTML emails have everything plain text emails don't have: color, style, images, and sometimes multimedia.

Why shouldn't you embed a video in an email? ›

If you embed the full video, people may miss or ignore the CTA. An embedded video can overpower the other CTAs within the email, and people will simply watch without taking your desired action. Of course, something similar could be said for a non-embedded video as well.

What is the video size limit for email? ›

As long as the file is less than 20-25MB, you can send it through email. But if you compress the video and it is still not less than 20-25MB, then you should use any of the methods pointed out in this article.

How do I email a video that exceeds 25MB? ›

How to Send an Attachment Larger than 25MB (up to 10GB) in Gmail

How can I send a video without losing quality? ›

Some of the best ones are Google Drive, Microsoft OneDrive and iCloud. All you need is to upload the photo or video into the cloud service of your choice and then head to the share options. There is no worry about your data getting leaked as there are tons of options available for sharing your file.

Is it better to embed or link a video? ›

In most cases, you'll want to embed videos. Embedding videos help improve video SEO and the searchability of your video content. But there's no harm in occasionally linking videos, especially for external content.

How do you make sure your videos are embedding enabled? ›

3. Allow embedding of your video.
  1. Go to “Video Manager.”
  2. Select the appropriate video and click “Edit”.
  3. Under the video, click "Advanced Settings”.
  4. Under "Distribution Options,” click the check mark in the "Allow Embedding" box.
  5. Save the changes.
19 Mar 2019

How do I embed a video without an embed code? ›

Embed videos by copy-pasting URL

For many popular video hosting platforms, including Vimeo, YouTube, and Animoto, you don't need the full embed code. Simply copy-pasting the URL of the video into the Visual editor will automatically embed the video for you.

How do I make my html email responsive? ›

If you plan to make a responsive email you have to use a meta viewport. This tells the email client to assume the email is as wide as the screen width of the device it's being displayed on. Below, you'll see an example of a reliable declaration with the essential meta tags.

Which is the correct HTML element for an email link? ›

The most common way to link an email in HTML is by using an anchor tag that has a href attribute. The href will point to the email you would like to send the email to. This link will open up a new, blank email, addressed to you, in the users' email client.

How do I create a link in html5? ›

Chapter Summary
  1. Use the <a> element to define a link.
  2. Use the href attribute to define the link address.
  3. Use the target attribute to define where to open the linked document.
  4. Use the <img> element (inside <a> ) to use an image as a link.

Can you embed code in an Outlook email? ›

You can inject HTML code into the message body via the Insert as Text option; tab Insert-> (Attach) File-> select the created htm-file-> press the down arrow on the Insert button-> Insert as Text.

How do I forward an HTML email without losing formatting? ›

Method 2: You can apply the following settings to forward the message in HTML format: “Settings” -> “Preferences” tab -> “Composing Messages” -> “Compose HTML messages” -> Select “on forward or reply to HTML message” under “Compose HTML messages” and save.

Is HTML5 enabled in Chrome? ›

HTML5 is now compatible with all popular browsers (Chrome, Firefox, Safari, IE9, and Opera) and with the introduction of DOCTYPE, it is even possible to have a few HTML features in older versions of Internet Explorer too.

Do all websites use HTML5? ›

HTML5 is the fifth revision of the HTML standard. HTML5 is now used by over 90% of websites, and by 96.5% of the top 1000 sites.

What language does HTML5 use? ›

HTML5 is the final version that was released of HTML, which is the hypertext markup language used in the building and structuring of content to be displayed on web pages. Those who use it can also utilise coding such as Cascading Style Sheets (CSS) and scripting languages such as Javascript alongside it.

How do I email a video that is too large for Outlook? ›

Save your file to a cloud service and share a link

Upload your file to a cloud service, such as OneDrive or Dropbox. Note: The service you use generates a link to access your file. Your recipient can open the link to download your file. After you upload the file, copy the link, and paste it into your email message.

How do I keep HTML formatting in Outlook? ›

On the File tab, choose Options > Mail. Under Compose messages, in the Compose messages in this format list, click HTML, Rich Text, or Plain Text.

How do I enable HTML links in Outlook? ›

Go through these steps:
  1. Assuming you are in the Outlook application and seeing the email, you must check or click on InfoBar at the top of the message.
  2. Click on Enable links and other functionality (not recommended). That will be all. Your links should become visible now.
23 Sept 2019

Does Outlook display HTML? ›

How do I view the HTML in Outlook? In Microsoft Outlook, double-click to open an email. You'll see an “Actions” menu under the “Message” tab. Click on that menu and select the “Other Actions,” then click on “View Source” to see the HTML code.

Can I embed an Iframe in Outlook email? ›

The best way around this is to copy your form landing page and include this in emails, instead of trying to embed the iframe.
...
Can I embed my iframe into an email?
Clientiframe displays?
Outlook Express 6Yes
Outlook XP / 2003 / 2007 / 2010No
ThunderbirdYes
Windows MailYes
18 more rows

Can you put an iframe in an email? ›

An iframe can be used to add your form landing page inside of another web page. This helps keep an open connection between the form and your contact database in BombBomb. But iframes typically don't work in email. This is because email doesn't function the same as a web page.

› watch ›

I show you the secret of how you can embed a video in an email. It will work on Outlook, Gmail, or whatever email client you use. #gmailtips #gmailtrick #gma...
Hey team, today I share how you can embed HTML in Outlook emails in 2021. I guide you through the process of adding an HTML template to Outlook live and Micr...
Step 1: Open Outlook · Step 2: Open “Get Add-ins” · Step 3: Search for “HTML” · Step 4: Install HTML Add-on · Step 5: Create New Ema...

How do you embed a video in a HTML file? ›

HTML allows playing video in the web browser by using <video> tag. To embed the video in the webpage, we use src element for mentioning the file address and width and height attributes are used to define its size. Example: In this example, we are using <video> tag to add video into the web page.

How do I add a video to my HTML website? ›

How to embed video in HTML
  1. Step 1: Edit your HTML. Go into edit mode for the page, post, or section of your website where you'd like to embed the video. ...
  2. Step 2: Copy your embed code. Next, copy your embed code. ...
  3. Step 3: Paste the embed code into your HTML.
19 Feb 2022

What is the difference between embed and video in HTML? ›

The VIDEO element makes it clear that the developer is attempting to display a video to the user. It has an opening and closing tag. The EMBED element is also used to incorporate media content into a web page. It can embed any media including videos, audio files, and gifs from external and local sources.

How do you embed a video file? ›

All you need to do is find your video and click the “Share” button to get to the embed code.
  1. Go to YouTube to get your video.
  2. Click the Share button.
  3. Click embed.
  4. Copy the embed code into the code of your site.
16 Aug 2021

Can you embed mp4 in HTML? ›

To embed video in HTML, we use the <video> tag. It contains one or more video sources at a time using <source> tag. It supports MP4, WebM, and Ogg in all modern browsers.

What is the easiest way to add a video to your website and why? ›

The quickest and easiest way to incorporate video onto your website is by embedding a link to a YouTube or Vimeo video. This method is compatible with nearly every content management system (CMS) and requires nothing more than copying an embed link into your site's HTML code.

How do I get an embedded link to a video? ›

On a computer, go to the YouTube video or playlist you want to embed. From the list of Share options, click Embed. From the box that appears, copy the HTML code. Paste the code into your website HTML.

What is an embed code for a video? ›

By Vyond Team on May 13, 2022. A video embed code is a string of code containing a video's data: its URL, size, and name, among other variables. These codes allow you to show video content on your blog and landing pages.

› html-tutorial › html5-v... ›


How to Embed Video in HTML5

https://www.tutorialrepublic.com › html-tutorial › html5-v...
https://www.tutorialrepublic.com › html-tutorial › html5-v...
In this tutorial you will the various techniques of inserting videos in an HTML document such as the new HTML5 video tag or the all time favorite YouTube videos...
Before the release of HTML5, a video could only be played in a browser with a plug-in (like a flash). The HTML5 <video> element specifies a standard way t...
To embed a video in an HTML page, use the <iframe> element. The source attribute included the video URL. For the dimensions of the video player, set the w...

Videos

1. The Secret to Deliverability
(Email on Acid)
2. Why You Should Consider Email Accessibility | Email on Acid
(Email on Acid)
3. How to Insert and Send HTML Email Newsletters in Outlook
(designmodo)
4. How to Email template test in different browser and client
(Shaha Alam)
5. How to - HTML Emails
(Inbox Income)
6. Accessibility in HTML email — Mark Robbins: #id24 Nov 2017
(Inclusive Design 24 #id24)
Top Articles
Latest Posts
Article information

Author: Twana Towne Ret

Last Updated: 09/18/2022

Views: 6113

Rating: 4.3 / 5 (64 voted)

Reviews: 87% of readers found this page helpful

Author information

Name: Twana Towne Ret

Birthday: 1994-03-19

Address: Apt. 990 97439 Corwin Motorway, Port Eliseoburgh, NM 99144-2618

Phone: +5958753152963

Job: National Specialist

Hobby: Kayaking, Photography, Skydiving, Embroidery, Leather crafting, Orienteering, Cooking

Introduction: My name is Twana Towne Ret, I am a famous, talented, joyous, perfect, powerful, inquisitive, lovely person who loves writing and wants to share my knowledge and understanding with you.