Skip to content

Latest commit

 

History

History
209 lines (148 loc) · 5.12 KB

background.md

File metadata and controls

209 lines (148 loc) · 5.12 KB

Background

A jQuery plugin for full-frame image and video backgrounds.

Using Background

Main

background.js
background.css

Dependencies

jQuery
core.js
transition.js

Basic

Create a new Background by passing the source image URL at initialization:

$(".target").background({
	source: "http://example.com/image.jpg"
});
<div class="target">
	...
</div>

Note: You will need to push any content above the background elements by setting the z-index.

Responsive

Create a responsive-friendly Background by defining key/value pairs containing the min-width image URLs:

$(".target").background({
	source: {
		"0px": "http://example.com/image-small.jpg",
		"980px": "http://example.com/image-large.jpg"
	}
});

HTML5 Video

Create a video Background by defining proper browser-specific source video URLs, as well as a poster image URL:

$(".target").background({
	source: {
		poster: "http://example.com/poster.jpg",
		webm: "http://example.com/video.webm",
		mp4: "http://example.com/video.mp4",
		ogg: "http://example.com/video.ogv"
	}
});

Note: Mobile browsers do not allow videos to auto play due to bandwidth concerns. Background will not attempt to load videos on mobile devices, instead the poster image will be displayed.

YouTube Video

Create a YouTube video Background by passing the YouTube embed URL as the source. If you do not define a poster, the YouTube thumbnail will be used:

$(".target").background({
	source: {
		poster: "http://example.com/poster.jpg",
		video: "//www.youtube.com/embed/VIDEO_ID"
	}
});

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-background-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Name Type Default Description
autoPlay boolean true Autoplay video
customClass string '' Class applied to instance
embedRatio number 1.777777 Video / embed ratio (16/9)
lazy boolean false Lazy load with scroll
lazyEdge int 100 Lazy load edge
loop boolean true Loop video
mute boolean true Mute video
source string OR object null Source image (string or object) or video (object) or YouTube (object)
youtubeOptions object null Custom YouTube player parameters (to be used cautiously); See https://developers.google.com/youtube/player_parameters for more
## Events

Events are triggered on the target instance's element, unless otherwise stated.

Event Description
loaded.background Background media loaded
ready.background Background media ready
## Methods

Methods are publicly available to all active instances, unless otherwise stated.

load

Loads source media

$(".target").background("load", "path/to/image.jpg");
$(".target").background("load", { "0px": "path/to/image-small.jpg", "980px": "path/to/image-large.jpg" });
$(".target").background("load", { "poster": "path/to/image.jpg", "webm": "path/to/video.webm", "mp4": "path/to/video.mp4", "ogg": "path/to/video.ogv" });
$(".target").background("load", { "poster": "path/to/image.jpg", "video": "//www.youtube.com/embed/VIDEO_ID" });

Parameters

Name Type Default Description
source string OR object   Source image (string or object) or video (object) or YouTube (object);

mute

Mutes target video

$(".target").background("mute");

pause

Pauses target video

$(".target").background("pause");

play

Plays target video

$(".target").background("play");

unload

Unloads current media

$(".target").background("unload");

unmute

Unmutes target video

$(".target").background("unmute");
## CSS
Class Type Description
.fs-background-element element Target elmement
.fs-background element Base widget class
.fs-background-container element Container element
.fs-background-media element Media element
.fs-background-media.fs-background-animated modifier Indicates animated state
.fs-background-media.fs-background-navtive modifier Indicates native support
.fs-background-media.fs-background-fixed modifier Indicates fixed positioning
.fs-background-embed element Embed/iFrame element
.fs-background-embed.fs-background-embed-ready modifier Indicates ready state