Html 在电子邮件中自动播放 Youtube 视频的代码

Question

我正在做电子邮件时事通讯，想向客户发送时事通讯。我想在其中以自动播放模式向我的客户展示我的 YouTube 频道视频。

我已经尝试了一些 HTML 和 CSS 但是我看不到它是自动播放的。

我已经从我的本地视频中完成了，但我想提供我的 YouTube 频道视频。

这是我本地视频的代码。

<!doctype html>
<html>
<head>
<title>Video in Email Test</title>
<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; }
 }
  @supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
    div[class^=video-wrapper] { display:block!important; }

  }
  #MessageViewBody .video-wrapper { display:block!important; }
</style>
</head>
<body>
<B>Video in Email Test</B><BR>

<!-- video section -->
<div class="video-wrapper" style="display:none;">
  <p>Video Content</p>
<video width="320" height="176" controls="controls" src="video/Photo Orange With Teglines_WhatsApp.mp4" autoplay muted >
      <!-- fallback 1 -->
</video>
</div>


<!-- fallback section -->

</body>
</html>

但是我想在我的电子邮件新闻信件中使用这个嵌入代码。

<!doctype html>
<html>
<head>
<title>Video in Email Test</title>
<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; }
 }
  @supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
    div[class^=video-wrapper] { display:block!important; }

  }
  #MessageViewBody .video-wrapper { display:block!important; }
</style>
</head>
<body>
<B>Video in Email Test</B><BR>

<!-- video section -->
<div class="video-wrapper" style="display:none;">
  <p>Video Content</p>
<iframe width="853" height="480" src="https://www.youtube.com/embed/u48etdTdscA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>


<!-- fallback section -->

</body>
</html>

我想给出自动播放此视频的说明

Answer 1

我可以确认 iframe 元素未在 most email clients

中呈现

可能您可以将视频上传到 YouTube 以外的其他地方，这样您就可以直接 URL，您可以在 <video> 元素中使用它，类似于您在“本地视频”示例中的做法.

Html 在电子邮件中自动播放 Youtube 视频的代码

Html Code for Youtube video autoplay in Email

html

javascript

css

youtube

video