Wallpaper Demo

View Documentation

Image

Create a new Wallpapered element by passing the source image file in the options object:

$("#element").wallpaper({
	source: "path/to/image.jpg"
});

<div id="element"></div>

Demo

Responsive

$("#element").wallpaper({
	source: {
		"fallback": "path/to/image_small.jpg",
		"(min-width: 980px)": "path/to/image_large.jpg"
	}
});

<div id="element"></div>

Demo

Video

Create a video Wallpaper by defining proper browser-specific source files:

$("#element").wallpaper({
	source: {
		poster: "path/to/poster.jpg",
		mp4:    "path/to/video.mp4",
		ogg:    "path/to/video.ogv",
		webm:   "path/to/video.webm"
	}
});

Demo

Play on Hover

Videos will autoplay and loop by default, but Wallpapers can also play on hover:

$("#element").wallpaper({
	hoverPlay: true,
	source: {
		poster: "path/to/poster.jpg",
		mp4:    "path/to/video.mp4",
		ogg:    "path/to/video.ogv",
		webm:   "path/to/video.webm"
	}
});

Demo

YouTube

Create a YouTube powered Wallpaper by passing the youtube embed URL as the source. If you do not define a poster Wallpaper will use the one provided by YouTube:

$("#element").wallpaper({
	source: {
		poster: "path/to/poster.jpg",
		video: "//www.youtube.com/embed/VIDEO_ID"
	}
});

Demo

Mobile Support

Wallpaper will treat mobile browsers differently and only display the supplied video poster to those users. This is an intentional decision and avoids forcing users to download large video files.