HTML5 Fullscreen Background Videos

I noticed several websites using a fullscreen background videos on their home pages. A good example is Paypal.com. The videos are typically short, between 10-15 seconds, with the sound turned off. The video falls back to a still background image for visitors whose browsers do not support HTML5 videos.

In addition, Paypal is using what looks like a playlist of several short videos that are displayed in a loop. If you’re interested in how you can implement background videos on your web pages, demothenes.info has a tutorial on how to add video background videos on your website.

HTML5 Download Attribute

HTML5 has a little-known attribute called download. The download attribute is often used in conjunction with the link or the <a> tag. Check the correct markup for the link tag below. Clicking on a HTML link will typically result in the browser opening up a new page, image, or a document.

In some cases, depending on your browser settings, clicking on a link will download a document, file or an image. For consistency, we can alter the behavior of the link tag by adding the download attribute. Let’s say, we want our readers to download an image, pdf, or a web page. We simply add the download attribute in the link tag.

A typical link looks like this:

<a href="page.html">link</a>

A link with the download tag would look something like this:

<a href="random-xxx.jpg" download="test.jpg">link</a>

By adding a filename in the download tag, we are specifying that we want the downloaded file to be renamed to test.png. The download attribute is currently supported on Chrome and Firefox. Safari and IE have not adapted it yet. Click on the Sample link below to see the download tag in action.

Demo