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.
<table align="right" width="160" height="91" border="0" cellspacing="0" cellpadding="0" class="w580"> <tr> <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"/> <![endif]--> <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"> </video> </td> </tr> </table>
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?
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 :)
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.