Creating a fallback image for HTML5 video in email

Question

I am trying to create an email that has an embedded video in it, along with a fallback image in case the client doesn't support html5.

Problem:
The issue I am running into is that, while the video works on compatible clients, the fallback image does not display on browsers that are incompatible with the video. I am very new when it comes to this stuff and don't know enough to identify where the problem is in the code I'm using.

Edit: Clarified what "incompatible" means.

<style type="text/css">

.video-wrapper {display:none;}

@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px) 
{
    .video-wrapper { display:block!important; }
    .video-fallback { display:none!important; }
}

@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) 
{
    div[class^=video-wrapper] { display:block!important; }
    div[class^=video-fallback] { display:none!important; }
}

#MessageViewBody .video-wrapper { display:block!important; }
#MessageViewBody .video-fallback { display:none!important; }

</style>

<b>Video in Email Test</b><br>

<!-- video section -->
<div class="video-wrapper" style="display:none;">
<p> Video Content </p>
<video controls="controls" height="176" poster="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" srcset="https://www.w3schools.com/html/mov_bbb.mp4" width="320">

<!-- fallback 1 -->
<a href="https://www.emailonacid.com">
<img height="176" src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320">
</a>

</video>
</div>

Answer 1

Based on the article you took the code from, you’re missing the following part that is supposed to act as a fallback:

<!-- fallback section -->
<div class="video-fallback">
  <p>Fallback Content</p>
  <a href="https://www.emailonacid.com" ><img height="176" 
    src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320" /></a>
</div>