Are you looking to embed videos in Outlook email? Here’s what you need to know.
Can you send videos in Outlook emails?
Yes, you can send videos in Outlook emails!
However, there is 1 thing to should know:
Only 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.
This isn’t the end of the world... It just means that when you send a video email in Outlook, you should make sure to have a fallback image available.
How to embed a video in Outlook with a fallback image
To send a video in Outlook, you need 3 components before you get started:
- Your video file (ideally .mp4 format)
- A fallback image with a play button, in case the embedded video is not supported
- A link to a video landing page, where someone can view the video
All of these components need to be hosted on the web, including the video and image files. If you’re using an email automation platform like Hubspot, Mailjet or Constant Contact, you should be able to upload them to your asset library, and grab the file link.
If you don’t have an email automation system, you can upload them to a service like Uploadcare or Filestack, and grab the file links from there.
For this example, these are components I’m using:
- Video file: https://stream.mux.com/mrnm3RM2qiwwymvIr2xg8gHuTlSkHM5G.m3u8
- Fallback image (note, I’m using a GIF to make it more engaging): https://image.mux.com/mrnm3RM2qiwwymvIr2xg8gHuTlSkHM5G/animated.gif?height=640&fps=24&start=6.7713335&end=11.7713335
- Video landing page: https://share.sendspark.com/view/lap0fh0tj9kcejc8
Now, I can write my code!
Code snippet for embedding videos in Outlook
The basic code for embedding videos in Outlook looks like this:
<video width="466" height="349" controls="controls" poster="[ fallback image ]" src="[ video file url ]">
<!-- fallback 1 -->
<a href= [ video landing page ] class="thumbnail-wrapper">
<img src="[ fallback image ]" alt="Animated thumbnail for video" class="thumbnail-image" />
So with my examples, the code is:
<video width="466" height="349" controls="controls" poster="https://image.mux.com/mrnm3RM2qiwwymvIr2xg8gHuTlSkHM5G/animated.gif?height=640&fps=24&start=6.7713335&end=11.7713335" src="https://stream.mux.com/mrnm3RM2qiwwymvIr2xg8gHuTlSkHM5G.m3u8">
<!-- fallback 1 -->
<a href=https://share.sendspark.com/view/lap0fh0tj9kcejc8 class="thumbnail-wrapper">
<img src="https://image.mux.com/mrnm3RM2qiwwymvIr2xg8gHuTlSkHM5G/animated.gif?height=640&fps=24&start=6.7713335&end=11.7713335" alt="Animated thumbnail for video" class="thumbnail-image" />
Want to see what this really looks like? Send yourself the example here.
Sending the video to Outlook users
To send the embedded video, add your HTML snippet to your email draft. This should work in any common email automation platform.
If you don’t use an email automation platform, you’ll need to use another tool (like Sendspark) to get your embed code into a draft on Outlook.
Easily send videos in email with Sendspark
Sendspark takes all of the trickery out of embedding emails in video.
With Sendspark, you can record your video, and automatically generate the video fallback image and landing page.
Then, you just copy and paste a snippet into either a draft on Outlook OR your email automation platform. When it’s supported, the video will play in-line, and when it’s not, a video fallback image (with a landing page) will show up.