Simple solution to video in emails. A few issues to resolve

Simple solution to video in emails. A few issues to resolve

A large percentage of our readership uses iOS devices or devices that support video in HTML. As a result, I have been trying to implement a simple solution that would allow for that, while degrading gracefully for the rest.

The first client I had to deal with (you guessed it) was Outlook for PC. Luckily, I was able to resolve this by reading another post on CM which posed a solution to my problem, or at least some code I could adapt.

Having solved Outlook, I was disappointed to learn that Gmail was an issue. Now, that has proved to be a bit more of a challenge. The solution I came up with was to have an image of a video player as a background image to the table I am housing it in, and make it clickable. Well, all solutions I have found involved some form of javascript that did not work, or got stripped in the email. I am a bit stumped at the moment, so I wanted to ask the collective here for some thoughts. Here is a sample of the code used:

<table align="right" width="160" height="91" border="0" cellspacing="0" cellpadding="0" class="w580">
    <td background="VIDEO/VideoStill.jpg">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml"; href="linkToOpen.html" target="_blank"; id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:91px; width:160px;top:0;left:0;border:0;z-index:1;' src="VIDEO/VideoStill.jpg"/>
<video width="100%" height="auto" class="w580" poster="VIDEO/VideoStill-noplay.jpg" controls >
  <source src="VIDEO/video.mp4" type="video/mp4">
  <source src="VIDEO/video.ogg" type="video/ogg">

Another added issue is that I I have, on all email clients possible, Mail on the mac (usually the most compliant in my experience) I am having an issue where the “Enlarge video” icon on the right of the video disappears. This does not happen on Outlook for Mac or other clients I have tested in. Any thoughts on that?

roshodgekiss roshodgekiss, 2 years ago

Hi Frendina, thank you so much for posting your code and observations here. The use of conditional comments for Outlook is certainly one up on previous solutions, so nice going there!

For those who are just getting up to speed with video in email, we have a handy guide.

Now, with Gmail and Mac Mail - that's a tricky one. I'd love to hear if anyone here has overcome these issues, beyond simply using a clickable preview image. In my opinion, this is the most reliable and least disruptive way to distribute video (ie. get the subscriber to watch it in their browser), but I'm keen to further research in this field so will be keenly watching this thread :)

Get in touch with us on Twitter:
We're also on Facebook:
Frendina, 2 years ago

Hi Ros, thanks for your kind comments! The current model I use is the link-from-preview-image one, but I wanted to experiment with this one for the next iteration.  Besides the cool factor, it makes sense for the type of emails we do.

After having resolved the issue with Outlook on PC, I thought I was home free. It's funny that the email clients which usually give me the least trouble are giving me issues. I will keep hacking at it and let you know if I come up with a solution.



Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free