Proposal for a background-video property

[jsnkuhn]

Has any serious consideration yet been given to adding a CSS background-video property?

There are already tons of articles explaining how to reposition the <video> tag for this. Since folks are doing it anyway seems that CSS background-video could save developers some work. Could also help discourage the use of bloated animated image types for this?

Seperation of concerns thinking would go: HTML for content video and CSS for background video. We have html and css background-image why not

I vaguely remember something about Safari considering allowing the use of video formats in background-image and treating them like animated GIFs by default (muted with auto repeat). But wouldn't there be special consideration for video that would require a separate background-video property (like playback speed, etc)?

background-video like background-image would need to work with (where possible) existing background- properties (-size, -position, etc..).

[tabatkins]

This wouldn't be appropriate as a separate property - it implies that you can have both an image and a video on a given background layer, which doesn't seem necessary - but a video() function that qualified as an <image> would make completely sense, taking a url and some playback control parameters.

[Myndex]

I like it from the standpoint of how using background images allows you to easily make an image responsive.

BUT

Keep in mind that for video:

• The user needs to be able to stop the video/audio on demand.
• The user's auto-play prohibit must be honored.
• Users that are sensitive to certain kinds of animation or motion need to be considered.
• Users that are sensitive to overstimulation need to be considered.
• Streaming video is a resource hog for the device and bandwidth.
• Having a dynamic background behind text can make the text unreadable.

[tabatkins]

Yup, but these are all considerations that apply equally to animated gifs or other animated image formats.

[jsnkuhn]

not following why a background-image and a background-video wouldn't be necessary together. Couldn't the background-image act as a fall back for the background-video in the same way a background-color can be a fallback for a background-image?

I guess it depends on how a poster image equivalent for the video is dealt with?

[tabatkins]

background-color is not a fallback for background-image, tho - it's a completely separate color displayed in addition to any background images.

[jsnkuhn]

thanks tab, i get it now. The background-image would load and render regardless of whether background-video loaded in or not which is most likely waistful. This also makes the fallback ideas in image() make more sense as well. image() and video() would create self contained either/or situations.

My only other general thought is how many folks are going to feel so odd about writing:

background-image: video();

that they would default to just use background to avoid the cognitive dissonance of a video() value inside a "image" property. And then have to deal with the implications of the background shorthand resetting things.

[jsnkuhn]

would this fall into [css-images-5] because it's on background-image or would it need to be it's own thing because it's video?

[LeaVerou]

+1 for a video() image function. Authors do crazy hacks right now to emulate this.

[SebastianZ]

would this fall into [css-images-5] because it's on background-image or would it need to be it's own thing because it's video?

It would probably be part of css-images-5. Therefore I added the label now. @tabatkins @LeaVerou Feel free to disagree.

And just to be clear, Tab's idea means that videos could be used everywhere where an <image> value is allowed, i.e. video() wouldn't be restricted to background-image but could also be used as value for list-style-image or border-image-source, for example.

Sebastian