Skip to content

Instantly share code, notes, and snippets.

@delputnam

delputnam/gist:68484d0c3f59a6670bb6

Created January 5, 2015 14:00
Show Gist options
  • Save delputnam/68484d0c3f59a6670bb6 to your computer and use it in GitHub Desktop.
Save delputnam/68484d0c3f59a6670bb6 to your computer and use it in GitHub Desktop.
Download ZIP
Embed video in HTML email
Raw
gistfile1.html
<!doctype html>
<!-- For more info: http://www.emailonacid.com/blog/details/C13/a_how_to_guide_to_embedding_html5_video_in_email -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Video in Email Test</title>
<style type="text/css">
@media screen and (max-width:800px) {
div[class=video_holder] {display:none;}
div[class=android] {display:block !important;width:320px !important;height:176px !important;}
}
@media screen and (width:320px), screen and (width:703px){
div[class=android] {display:none !important;}
div[class=video_holder] {display:block !important;}
}
.ExternalClass div.video_holder {display:none !important;}
.ExternalClass div.android {display:block !important;width:100% !important;height:200px !important;}
</style>
</head>
<body>
<div class="video_holder">
<p>Video Div</p>
<video width="320" height="176" controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
<a href="www.emailonacid.com" ><img height="176"
src="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/backup_bunny2.jpg" width="320" /></a>
</video>
</div>
<div class="android" style="display:none; width:0px; height:0px; overflow:hidden;">
<p>Android Div</p>
<a href="www.emailonacid.com" ><img height="176"
src="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/backup_bunny2.jpg" width="320" /></a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment