Loop is a Boolean attribute of the video tag in HTML5 that is supported by the latest versions of modern browsers, including IE 9.0. Then loop makes it, well, loop.Best Practices for Websites with Looped Video Backgrounds The muted attribute is just in good taste (the video shouldn’t have audio anyway, but also, is requires on iOS to get the autoplay working. The playsinline attribute is so this works on iOS. There is no controls attribute, so there is no way for the user to start/stop the video.

Remember we’re being tasteful here, so this is OK. The autoplay attribute is there because we are wanting the video to automatically play. You might also want to use a background in CSS.

There are a lot of attributes there! The poster attribute gives the video an image to show while the video is loading or in case the video doesn’t load at all. We need to put the video on the page, of course, so here’s that: Dudley Story has already done a lot of research about this and has a nice setup we can use. Let’s do this thing Montana style, in honor of the trip Media Temple and I are taking to visit ZaneRay. You’re probably putting text on top of the video, so make sure it has enough contrast to be readable.

Video is about the heaviest thing you can put on a website, and this is a video that people didn’t exactly ask for, so mind that. It’s still worth mentioning the basics of tastefulness here: I’m not particularly interested in a design philosophy debate here (perhaps another time), but instead the how-to of getting it done if you need to, as well as some different patterns it might take the form of. You’ll have to do some layout trickery to get it done.Ĭertainly, a full-page background video can be just a bit much. The biggest reason you don’t, probably, is that you can’t set a movie file as the background-image in CSS. There is text on top of it (hence, “background”), which is an interesting effect that you don’t see every day. A video background that takes up the entire browser window.

Looping video backgrounds