How To Embed Youtube Video In Mailchimp
How to Embed HTML5 Video in Emails | And Your Other Options
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?
| 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.
How To Embed Youtube Video In Mailchimp
Source: https://www.emailonacid.com/blog/article/email-development/a_how_to_guide_to_embedding_html5_video_in_email/
Posted by: humphreyhunty1956.blogspot.com
0 Response to "How To Embed Youtube Video In Mailchimp"
Post a Comment