Tips & Tricks

How to Embed Videos in Outlook Email

Bethany Stachenfeld, Co-founder & COO
July 23 2020

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:

  1. Your video file (ideally .mp4 format)
  2. A fallback image with a play button, in case the embedded video is not supported
  3. 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.

Host your video files

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:

  1. Video file: https://stream.mux.com/mrnm3RM2qiwwymvIr2xg8gHuTlSkHM5G.m3u8
  2. 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
  3. 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" />
</a>
</video>

 

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" />
</a>
</video>

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.

Get started sending videos in Outlook with Sendspark for free!

Start Recording Today

Sendspark is the easiest way to record and request videos. Liven up your communication with video today!

Get Sendspark Free
Video Recording Personalize At Scale Send Video Email Track Engagement
Get Sendspark Free