我正在做电子邮件通讯,并希望将通讯发送给客户。
我想以自动播放模式向客户展示我的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/