我正在尝试创建一封电子邮件，其中包含嵌入的视频，以及备用影像，以防客户端不支持 html5。

问题：
我遇到的问题是，虽然视频可以在兼容的客户端上运行，但后备影像不会显示在与视频不兼容的浏览器上。当涉及到这些东西时，我非常陌生，并且不知道如何确定我正在使用的代码中的问题所在。

编辑：澄清“不兼容”的含义。

<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  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>

uj5u.com热心网友回复：

根据您从中获取代码的文章，您缺少以下应该作为后备的部分：

<!-- 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>