Last active
August 29, 2019 15:41
-
-
Save cyancey76/f50a1bc527dc864960c51bc8c5bcd3d5 to your computer and use it in GitHub Desktop.
[Embed HTML5 video in html email] from http://www.emailonacid.com/blog/article/email-development/a_how_to_guide_to_embedding_html5_video_in_email/ -- Need to make sure your server is configured to send the right headers for serving videos https://stackoverflow.com/questions/15656465/html5-video-not-playing-in-firefox #video #HTML #html5 #email
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| AddType video/ogg .ogv | |
| AddType video/mp4 .mp4 | |
| AddType video/webm .webm | |
| AddType audio/mpeg .mp3 | |
| AddType audio/ogg .ogg | |
| AddType audio/mp4 .m4a | |
| AddType audio/wav /wav |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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; } | |
| .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> | |
| </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" poster="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" src="https://www.w3schools.com/html/mov_bbb.mp4" > | |
| <!-- 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> | |
| <!-- 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> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment