A siamese cat lying between the pages of a Truman Capote book, resting on a man lying under a blanket

appendChild and insertBefore are very useful when it comes to adding elements to a web page, but doing so often involves rather baroque navigation through the DOM, and laboriously constructing elements. Sometimes, you just want to sneak a tag and some content beside or inside an element. Thankfully, insertAdjacentHTML can come to the rescue in those circumstances.

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.