{"main":["background.js","background.css"],"options":[{"name":"autoPlay","type":"boolean","default":"true","description":"Autoplay video"},{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"embedRatio","type":"number","default":"1.777777","description":"Video / embed ratio (16/9)"},{"name":"loop","type":"boolean","default":"true","description":"Loop video"},{"name":"mute","type":"boolean","default":"true","description":"Mute video"},{"name":"source","type":"string OR object","default":"null","description":"Source image (string or object) or video (object) or YouTube (object)"},{"name":"youtubeOptions","type":"object","default":"null","description":"Custom YouTube player parameters (to be used cautiously); See https://developers.google.com/youtube/player_parameters for more"}],"events":[{"name":"loaded.background","description":"Background media loaded"},{"name":"ready.background","description":"Background media ready"}],"methods":[{"name":"load","description":"Loads source media","params":[{"name":"source","type":"string OR object","description":"Source image (string or object) or video (object) or YouTube (object);"}],"examples":["$(\".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\" });"]},{"name":"pause","description":"Pauses target video","examples":["$(\".target\").background(\"pause\");"]},{"name":"play","description":"Plays target video","examples":["$(\".target\").background(\"play\");"]},{"name":"unload","description":"Unloads current media","examples":["$(\".target\").background(\"unload\");"]}],"name":"Background","type":"widget","description":"A jQuery plugin for full-frame image and video backgrounds.","dependencies":["core.js","transition.js"],"css":[{"name":".fs-background-element","type":"element","description":"Target elmement"},{"name":".fs-background","type":"element","description":"Base widget class"},{"name":".fs-background-container","type":"element","description":"Container element"},{"name":".fs-background-media","type":"element","description":"Media element"},{"name":".fs-background-media.fs-background-animated","type":"modifier","description":"Indicates animated state"},{"name":".fs-background-media.fs-background-navtive","type":"modifier","description":"Indicates native support"},{"name":".fs-background-media.fs-background-fixed","type":"modifier","description":"Indicates fixed positioning"},{"name":".fs-background-embed","type":"element","description":"Embed/iFrame element"},{"name":".fs-background-embed.fs-background-embed-ready","type":"modifier","description":"Indicates ready state"}],"use":"### Basic\n\nCreate a new Background by passing the source image URL at initialization:\n\n```javascript\n$(\".target\").background({\n\tsource: \"http://example.com/image.jpg\"\n});\n```\n\n```markup\n<div class=\"target\">\n\t...\n</div>\n```\n\nNote: You will need to push any content above the background elements by setting the z-index.\n\n### Responsive\n\nCreate a responsive-friendly Background by defining key/value pairs containing the `min-width` image URLs:\n\n\n```javascript\n$(\".target\").background({\n\tsource: {\n\t\t\"0px\": \"http://example.com/image-small.jpg\",\n\t\t\"980px\": \"http://example.com/image-large.jpg\"\n\t}\n});\n```\n\n### HTML5 Video\n\nCreate a video Background by defining proper browser-specific source video URLs, as well as a poster image URL:\n\n```javascript\n$(\".target\").background({\n\tsource: {\n\t\tposter: \"http://example.com/poster.jpg\",\n\t\twebm: \"http://example.com/video.webm\",\n\t\tmp4: \"http://example.com/video.mp4\",\n\t\togg: \"http://example.com/video.ogv\"\n\t}\n});\n```\n\n### YouTube Video\n\nCreate 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:\n\n```javascript\n$(\".target\").background({\n\tsource: {\n\t\tposter: \"http://example.com/poster.jpg\",\n\t\tvideo: \"//www.youtube.com/embed/VIDEO_ID\"\n\t}\n});\n```","demo":"<style>\r\n\t.background { background: #eee; margin: 0 0 20px; padding-top: 50%; width: 100%; }\r\n\t.background.square { padding-top: 150%; }\r\n\t.background.bar { margin: -25px 0; }\r\n</style>\r\n\r\n<script>\r\n\t$(function() {\r\n\t\t$(\".background\").background();\r\n\r\n/*\r\n\t\t$(\".load_background\").click(function() {\r\n\t\t\tvar source = $(this).data(\"background\");\r\n\t\t\t$(\".loader\").background(\"load\", source);\r\n\t\t});\r\n*/\r\n\t});\r\n</script>\r\n\r\n<h4>Basic</h4>\r\n<div class=\"background\" data-background-options='{\"source\":\"http://formstone.it/files/demo/space.jpg\"}'></div>\r\n\r\n<h4>Responsive</h4>\r\n<div class=\"background loader\" data-background-options='{\"source\":{\"0px\":\"http://formstone.it/files/demo/nasa-bw-1.jpg\",\"980px\":\"http://formstone.it/files/demo/nasa-bw-2.jpg\"}}'></div>\r\n<!--\r\n<span class=\"button load_background\" data-background='{\"0px\":\"http://formstone.it/files/demo/nasa-bw-1.jpg\",\"980px\":\"http://formstone.it/files/demo/nasa-bw-2.jpg\"}'>Load 1</span>\r\n<span class=\"button load_background\" data-background='{\"0px\":\"http://formstone.it/files/demo/nasa-bw-2.jpg\",\"980px\":\"http://formstone.it/files/demo/nasa-bw-3.jpg\"}'>Load 2</span>\r\n-->\r\n\r\n<h4>Video</h4>\r\n<div class=\"background\" data-background-options='{\"source\":{\"webm\":\"http://formstone.it/files/demo/oranges.webm\",\"mp4\":\"http://formstone.it/files/demo/oranges.mp4\",\"ogg\":\"http://formstone.it/files/demo/oranges.ogv\",\"poster\":\"http://formstone.it/files/demo/oranges.jpg\"}}'></div>\r\n\r\n<h4>YouTube</h4>\r\n<div class=\"background\" data-background-options='{\"source\":{\"video\":\"//www.youtube.com/embed/tKONNhMvPtI\"}}'></div>"}