I embedded a video in our email using HTML and the video works in some clients while the fallback shows in the other clients. My problem is that when I tested the html email in Litmus it showed that the fallback and the video appeared in Outlook MacOS 12.6.1 See screenshot below: Screenshot of test
If I remove the fallback for Outlook, the video or image will not show up in Outlook browser.
I'd like to ask if there is a way I can target Outlook MacOs and Outlook browser? Maybe using vml? media query?
Thank you!
Please see my code below (I used example links and images as an example for now):
<!-- Video -->
<tr>
<td style="padding: 30px 30px 10px 30px;">
<video class="video" width="540" controls poster="https://fakeimg.pl/540x400" src="https://example.com/yourvideoname.mp4">
<!--your fallback goes here-->
<a class=”video” rel="noopener" target="_blank" href="https://www.example.com/" ><img style="width: 540px;" src="https://fakeimg.pl/540x400" width="540" /></a>
</video>
<!--outlook.com fallback-->
<a class="videoFallback" style="display: none; mso-hide: all;" rel="noopener" target="_blank" href="https://www.example.com/"><img border="0" src="https://fakeimg.pl/540x400" width="540"></a>
</td>
</tr>
<!-- /Video -->
My styling includes:
.video\0 {
display: none !important;
}
.videoFallback\0 {
display: block !important;
}