HTML 5 Video in Emails

HTML 5 is the new version of HTML and XHTML. It is rising rather quickly and it has been said that it will play a huge part in the world of HTML in years to come. Although the final stages of HTML 5 are still in the works, browsers such as; Safari, Google Chrome and Firefox are all supporting this new technology. The HTML5, <video> tag has been said to stand out particularly well. It has been said that this ‘tag’ was created to allow video support of all formats to work on all browsers without installations of any other plugins etc.

The below code seemed to give the best result, after all the current video options were removed.

<video width=”600″ poster=”fallback-image.png” controls autoplay>
<source src=”″ type=”video/mp4″ />
<source src=”” type=”video/webm” />
<source src=”” type=”video/ogg” />

<!– Fallback if HTML5 video is not supported –>
<a href=””><img border=”0″ src=”fallback-image.png” label=”Fallback Image” width=”600″></a>

As seen in the example, you have to add in a substitute image (this will be loaded as the image for the video before it is presented to the clients who want to support video for their emails) in the <video> tag. You also have to include the width and the height of the video. While showing reference of your source on your server, the ‘H.264′ encoded video should be called into the <video> tag. This is done by incorporating the <source> tag. After you have incoded all of this, you add in the content which you want displaying in your choosen email clients, ensuring that they don’t support HTML5 (while inside the <video> tag).

HTML5 Video Email Support

If you are a Mac using, your first choice should be Apple Mail. This is because, it has been said that the video will run effectively without problem. It has also showed perfect playback on the iPhone too. After a successful outcome with Apple Mail, you can then try out all the other email clients, like; Hotmail, Yahoo etc. However, with much disappointment, online web clients have chosen to not support HTML5 video playback. Although video playback isn’t supported, backup content will be able to be played. This feature was not supported before, so it will be appreciated now. The same happened on Windows too. The video was not supported however, the option for backup content was allowed.

Add a Comment

Your email address will not be published. Required fields are marked *


My name is Nohman Habib and I am a web developer with over 10 years of experience, programming in Joomla, Wordpress, WHMCS, vTiger and Hybrid Apps. My plan to start is to share my experience and expertise with others. Here my basic area of focus is to post tutorials primarily on Joomla development, HTML5, CSS3 and PHP.

Nohman Habib


Request a Quote

PHP Code Snippets Powered By :