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 , 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.

Seven Nation Army

SVG text has some significant limitations compared to HTML content… but it also has some very real advantages in particular use-cases, and can sometimes be the only way to solve certain text layout challenges on web pages.