Sending video in email is a fantastic way to personalize virtual conversations with your customers.
Videos help you stand out in the inbox. By adding video in your emails, you can increase email open rates from 40% to 80%. In fact, sending an email with video can lead to a 90% open rate and 83.3% click-through-rate. This is a 12.6% increase in engagement in comparison to text-based email.
These numbers make it pretty clear that including video in your emails is the way to go.
When sending a video in email, you don’t have to embed the video in email.
A common workaround is to send an image or GIF preview of a video, and then link the image preview to a video landing page.
Here is an example:
This is because there are tradeoffs to embedding video in email that are worth considering:
The answer to this question is not exactly straightforward, but in short: yes, it is possible, sometimes.
Currently, these are the only email clients that support embedded video in email:
These email clients make up around 40% of the email-user market.
So, if you are going to embed a video in email, you need to make sure to set a fallback for the ~60% of viewers who will not be able to watch video in-line.
If you’re going to attempt to embed videos in email, there are some things to consider:
Bearing all of this in mind, your code should essentially be composed of three major sections. These can be described as the style section, the video embed section, and the fallback state section.
Within the style section, we’re using media queries to look for webkit properties that we know exist on supported clients. When this is the case, we’re applying new display properties to toggle with whether a section displays or not. You can learn more on webkit here.
This the code snippet for the style section.
<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>
In the video embed section, if the end client does have the necessary display properties, we’re displaying a div with the supported HTML. This way, we should always have a fallback image.
This is the code snippet for the video embed section.
<!-- video section -->
<div class="video-wrapper" style="display:none;">
<video controls="controls" poster="https://image.mux.com/IzssZrH74u4Egw7iss724vWpqhnndmBu/animated.gif?height=640&fps=24&start=3.9546665&end=8.9546665"
src="https://stream.mux.com/IzssZrH74u4Egw7iss724vWpqhnndmBu/medium.mp4"><!-- fallback 1 --><a href="https://share.sendspark.com/view/zdetn5fvj38yp3e2"> <img height="176" src="https://image.mux.com/IzssZrH74u4Egw7iss724vWpqhnndmBu/animated.gif?height=640&fps=24&start=3.9546665&end=8.9546665" width="320" /></a>
</video>
</div>
If all else fails, and the client does not support video, we can display things as normal with a fallback image. This is quite important, as it makes certain that the viewer will still have a visually appealing video cover image (assuming the fallback image is effective).
This is the code snippet for the fallback state section.
<!-- fallback section -->
<div class="video-fallback">
<a href="https://share.sendspark.com/view/zdetn5fvj38yp3e2"><img height="349" src="https://thumbnail.sendspark.com/animated/7sdlhm6xy6isdaz1t5irtql6b5knim3b.c5cfaeef15b243ef176b288576b58506ec13b493/sendspark-animated-thumbnail-7sdlhm6x.gif" width="466" /></a>
</div>
When encountering email clients that do not support HTML5 video, you want to ensure that you have an appealing fallback image. This preview image has to be enticing enough for your customer to be willing to click.
To create a fantastic fallback image, you should:
Sendspark offers the option to customize your video thumbnail. This affords you the opportunity to design the perfect fallback image, specifically created to entice your audience. An individualized video thumbnail significantly increases the likelihood that your customer will click on your video.
So, your code should have 3 sections:
Put together this should make a pleasant experience for your audience. Videos will play in-line for those with compatible email clients, while a friendly fallback image will be displayed for those with incompatible email clients.
Getting a video to play in email is largely desirable for both a business and its customers. It is user friendly and significantly increases the chances that a customer will play your video. But it can be a bit complicated to execute on your own.
With Sendspark, you can easily send videos to customers that play directly in email. When encountering an email client that is not compatible with in-line video, Sendspark utilizes a fallback image that directs your client to a page where the video can play. This way, all of your customers will be able to watch your videos, regardless of the email client they use.
Get started with Sendspark, today!