CODEWITHSUNDEEP
htmlcssemailhtml5-videohtml-email
TheC
TheC

Reputation: 3

HTML5 video on e-mail clients

first time posting here!

I have a hard time to get the e-mail clients to render videos in html5. I tried some things and found a few that help but don't solve the problem. Here is some information that already googled and have tested:

• The tested email clients are !Yahoo, Gmail, Hotmail and Outlook. All clients that i tested don't rendered the videos. • In my research i found some contradictions articles where some places say hotmail began to render html5 videos but others are saying that only display a fallback image. On my tests, only fallback images or posters shows up. =(

Here is the code that i used in my tests (the best i already founded so far...):

.ExternalClass td.video_holder {display:none !important;}
.ExternalClass div.android {display:block !important;width:100% !important;height:200px !important;}

                    <div align="center" class="video_holder">                            
                    <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="#" ><img height="176" src="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/backup_bunny2.jpg" width="320" alt="Just a video" /></a>
                    </video>
                    </div>
                    <div class="android" style="display:none; width:0px; height:0px; overflow:hidden;">
                      <p>Android Div</p>
                      <a href="#" ><img height="176" 
                        src="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/backup_bunny2.jpg" width="320" alt="Just a video" /></a>
                    </div>

Another code I tested was the litmus email with the video running in the background and here we have a user opening the email:

https://litmus.com/builder/a908938

http://www.mobypicture.com/user/asouers/view/16785201

Now guys, what i'm doing wrong here? Nothing? Everything?

And another thing: I'm not a expert level on HTML5 and CSS3 and don't know another programming language, so take easy with me! Rs.

Upvotes: 0

Views: 135

Answers (1)

Ted Goas
Ted Goas

Reputation: 7587

HTML5 video is very poorly supported in email clients. Even iOS Mail, considered to be one of the good email clients for rendering code, removed video support in iOS 9. I don't know if there's anything wrong with your code, but unfortunately I don't think it matters.

Upvotes: 1

Related Questions