javascript - 电子邮件中YouTube视频自动播放的HTML代码

标签 javascript html css video youtube

我正在做电子邮件通讯,并希望将通讯发送给客户。
我想以自动播放模式向客户展示我的YouTube channel 视频。
我已经尝试了一些HTML和CSS,但看不到它是自动播放的。
我已经完成了本地视频的制作,但是想提供自己的YouTube channel 视频。
这是我的本地视频的代码。

<!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>
我想指示该视频的自动播放

最佳答案

我可以确认iframe元素未在most email clients中呈现
可能您可以将视频上传到YouTube以外的其他地方,从而为您提供直接URL,您可以在<video>元素中使用该URL,类似于在“本地视频”示例中的操作。

关于javascript - 电子邮件中YouTube视频自动播放的HTML代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62889554/

相关文章:

javascript - 删除评论弹出窗口

javascript - HTML 输入 - 删除前导字符

html - 尝试垂直对齐图像但也将其向左浮动

html - 如何在 html 中的 `fa-circle-thin` 类的右侧添加文本?

html - Div 未正确显示

javascript - javascript 预加载如何工作?

javascript - 事件发射器 JavaScript

html - 缩放图像以适合边界框

javascript - 如何使静态网站的内容可共享

CSS莫名其妙的缩进