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.

Read more about YouTube for Web Page Backgrounds

Recently my Fullscreen HTML5 Background Video article has received a number of questions about how to achieve a “scrolling fullscreen video” effect: video that appears behind content, but which scrolls upwards with the rest of the page.

This surprised me a little, since the solution is a fairly straightforward use of CSS positioning combined with the styles typically used for fluid images… but sharing the solution does provide me with the opportunity to include a neat use of blend modes, so here goes.

Read more about Scrolling HTML5 Video

The final project in my 1st year web development class is to design and develop a site to teach a skill. This semester, several students are creating sites with musical themes: how to play guitar, read sheet music, etc. That got me thinking: what’s the best way to create musical notation on a modern website?

Most digital sheet music is delivered in a format that’s indistinguishable from the bound papers we remember from childhood lessons, only locked into PDFs. To present musical notation in an accessible, usable way on the web, we need to take a different approach.

Read more about Basics of Music Notation on the Web