Over the English Channel

A view from the International Space Station. Fullscreen demo

My article on using CSS to position HTML5 videos as fullscreen web page backgrounds has proven to be one of the most popular on this site, but the technique has a significant challenge in that it forces users to host their own videos, or to find a service to do so.

The obvious alternative is to use YouTube as a source for backgrounds, but I’ve long considered YouTube videos to be uncontrollable: not only are <iframe> elements more difficult to control and style, but the solutions that are available, such as tubular, rely on JavaScript, usually wrapped in a framework like JQuery, to “trick” the browser into positioning and playing the video, recalculating the size when the window changes. I’ve never found these solutions particularly elegant or efficient.

Recently a bit of research and experimentation has shown that it is possible to employ ordinary HTML5 and CSS to gain YouTube videos as web page backgrounds, with no JavaScript or special markup required. I’ve also included a standalone demo and a CodePen to demonstrate the technique.

User-downloadable files face a significant UX problem: many have auto-generated, cryptic filenames that are difficult to read, and browsers often open linked files such as PDFs in a new tab, rather than downloading them. This is problematic: if you provide a button that says “Download X”, it’s reasonable to assume that the browser will download it, not open it.

Traditionally, these issues have been solved with complex server-side configuration and JavaScript foolery; today, you can use a little-known called download to address both problems.

Everything changes

Select the text above to edit it

Traditionally there are just two ways to interact with web pages: form elements and links. For many sites, those methods will continue to work fine… but in some cases, you may want to blur or eliminate the line between page content and user input. To achieve that, we can use the simplest - and longest - you’ll ever see: contenteditable.