How to make my Outlook fallback not show for my embedded video in HTML email?

21 Views Asked by At

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; 
    
    }  
0

There are 0 best solutions below