{"_id":"jquery-background-video","_rev":"5-40f560fc5dac2462fd07bfa61e123ffe","name":"jquery-background-video","description":"Instantly improve your HTML5 background videos with a single line of jQuery","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"jquery-background-video","version":"1.0.0","description":"Instantly improve your HTML5 background videos with a single line of jQuery","main":"jquery.background-video.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"https://github.com/BGStock/jquery-background-video.git"},"keywords":["jquery","background","video","videos","html5"],"author":{"name":"BG Stock"},"license":"MIT","bugs":{"url":"https://github.com/BGStock/jquery-background-video/issues"},"homepage":"https://github.com/BGStock/jquery-background-video","gitHead":"9604944ca48d8b30ddf58995503f0cdad4a0c6a9","_id":"jquery-background-video@1.0.0","_shasum":"92eee5ce31cf587783943818b5dc0d28a9af0b90","_from":".","_npmVersion":"2.11.3","_nodeVersion":"0.12.7","_npmUser":{"name":"bgstock","email":"info@branchdigital.com.au"},"dist":{"shasum":"92eee5ce31cf587783943818b5dc0d28a9af0b90","tarball":"https://registry.npmjs.org/jquery-background-video/-/jquery-background-video-1.0.0.tgz","integrity":"sha512-800RMxT/EL9FafWBSfWaxWG4jk65Y2fApM7uOh9jjL1KSbPDbzVHtJlFRHYlwqdpft418rP8Q6Eb15ciyPWnJw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjvtCmLPrYIs130AOoIFN3xJ27+T1q1sUD1lzTykIb/AiEA0drai+vRD1FOPUQNxvFboTbOW1+iCtCNZic1oQ3/prY="}]},"maintainers":[{"name":"bgstock","email":"info@branchdigital.com.au"}],"directories":{}},"1.1.0":{"name":"jquery-background-video","version":"1.1.0","description":"Instantly improve your HTML5 background videos with a single line of jQuery","main":"jquery.background-video.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/BGStock/jquery-background-video.git"},"keywords":["jquery","background","video","videos","html5"],"author":{"name":"BG Stock"},"license":"MIT","bugs":{"url":"https://github.com/BGStock/jquery-background-video/issues"},"homepage":"https://github.com/BGStock/jquery-background-video","gitHead":"a19ff7bb076c2bceee105e9e5a14d6a77aaa6ed1","_id":"jquery-background-video@1.1.0","_npmVersion":"6.4.1","_nodeVersion":"8.14.0","_npmUser":{"name":"bgstock","email":"info@branchdigital.com.au"},"dist":{"integrity":"sha512-a7gz31irPsp8FoWV4KKkLU1sqSRfz++jDYZtPudpf7eOS4WX+6E5uqtiyx+07MYKQzXjFTVXIQV8/O7ULtB5ww==","shasum":"68a82d71a334dad945aec237b0b0ae4131811842","tarball":"https://registry.npmjs.org/jquery-background-video/-/jquery-background-video-1.1.0.tgz","fileCount":6,"unpackedSize":17389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqnd+CRA9TVsSAnZWagAAFm8P/1mrO5opwSA7P4Tqjrcp\nYFzyJcD8u+pwL/bo/pfKgg7K9RqBtFiWnLjtMSwdBOu18yrfhaPqfIECRREq\nFBOL0K7mqySlPJxp4qmON260kLP6RdQvvRCt3PBaIbqWw7QyBt9pjfxvY4x0\nKhwbozokoBztxiN0L7owUTcerxBT1fHF58O5AEnVEL0Fhi/ufxlUkfF7Hhmp\ncysgzn6KpfLl4TRywCiULw9bbo9zPXvxh0sajpqYCvW0FnPAvivftRRugqtB\nylS9cOsu5sO2rWGHe3f53+pefmfDETxIlrMCtMHSy/o7sPz0CRmijH3gnpSt\nHw37yhTcKfPa3bBIILTXM7Xv52RwheZN7BoWfYoavowTwflg0HBWVn015qJ4\nAuTqgL7ZlowJRVWVtJdjc9b+Xl4+uYM8O3HOyG6/3a31E/UK0Ye5GTWd7DNK\nzYcJdCdogGWylLvJDcO7GfT/bGnIO7OAkZvzrBxuEXiTqR99Rfh4M9F9vBPP\nzVuLrV7AQZOJ/SuiIkhY5dKDbviCpZr4k1gMTBkogp42C3JDyRIZFka0pSdf\nBhCNP/dQejTlW14e3OysdeQPi34902oobm0Q4k0heQvHZ+rMQI/pW4P7TOhx\nxXms29KFrA3UUoMmVffNwuo/H4G0PxWPkf2dY1W9sRJ/ZOCaLsUJ51fIpCvy\n6jBE\r\n=aLNj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGxyGVoz+Rltmc6beietsqFrhbvqQT6kR5xNYzS3lNoiAiEApXDCfqEjKbMzWEgNwlQYoDreW763HTES4ZIj7Bgr/3o="}]},"maintainers":[{"name":"bgstock","email":"info@branchdigital.com.au"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/jquery-background-video_1.1.0_1571452797563_0.4721245282048243"},"_hasShrinkwrap":false}},"readme":"# jQuery Background Video\nInstantly improve your HTML5 background videos with a single line of jQuery.\n\nBuilt by the folks over at [BG Stock](https://html5backgroundvideos.com) - Premium HTML5 Background Videos.\n\n## What does the plugin do?\nThe plugin allows you to enhance your background videos in a few ways\n - Allows you to fade in your video when it starts playing (to avoid a sudden jump)\n - Emulates `background-size: cover;` / `object-fit: cover;`\n - Destroys the video and prevents it downloading on iOS devices (because they can't do background video)\n - Optionally auto-pause video after X seconds (easier on your users' power consumption)\n - Optionally add and position a pause/play button\n\nExample: [http://codepen.io/GusRuss89/pen/bVwNrE](http://codepen.io/GusRuss89/pen/bVwNrE)\n\n## Installation\nWith bower\n```\nbower install jquery-background-video\n```\nWith npm\n```\nnpm install --save jquery-background-video\n```\nWith git\n```\ngit clone https://github.com/BGStock/jquery-background-video\n```\nOr just download the zip\n\n## How do I use it?\n### 1. Include the latest version of jQuery. E.g.\n```javascript\n<script src=\"https://code.jquery.com/jquery-2.1.4.min.js\"></script>\n```\n### 2. Include jquery.background-video.js\n```javascript\n<script src=\"path/to/jquery.background-video.js\"></script>\n```\n### 3. Add a `<video>` as the first child of the element that you want it to be the background for\n\n```html\n<div class=\"element-with-video-bg jquery-background-video-wrapper\">\n\t<video class=\"my-background-video jquery-background-video\" loop autoplay muted playsinline poster=\"path/to/your/poster.jpg\">\n\t\t<source src=\"path/to/video.mp4\" type=\"video/mp4\">\n\t\t<source src=\"path/to/video.webm\" type=\"video/webm\">\n\t\t<source src=\"path/to/video.ogv\" type=\"video/ogg\">\n\t</video>\n</div>\n```\nNote: the class names `jquery-background-video` and `jquery-background-video-wrapper` are only used in the CSS, just remember to update them there if you want to change them. The class name `my-background-video` is for demo purposes, this can be whatever you like.\n\nIf you're using the fade-in option you should also set the poster image as a `background-image` for your wrapper element.\n```css\n.element-with-video-bg {\n\tbackground-image: url(path/to/your/poster.jpg);\n}\n```\nIt's important to use `background-image` instead of the shorthand `background` because the plugin CSS sets `background-position`, `background-repeat` and `background-size`, which would be overwritten by the shorthand `background`.\n\niOS Support: Automatic playing of videos is supported as of iOS 10+, but requires the `playsinline` attribute on the `<video>` tag.\n\n### 4. Call the plugin on the video element\nIn your main JavaScript file\n\n```javascript\n$(document).ready(function(){\n\t$('.my-background-video').bgVideo();\n});\n```\n\n_*OR*_\n\nWith a data attribute on the video tag\n\n```html\n<video data-bgvideo=\"true\" [other video params]>\n```\n\n### 5. (Recommended) include or copy/paste the CSS into your project\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"path/to/jquery.background-video.css\">\n```\n\n## Options\n### Default options\n```javascript\n$('.my-background-video').bgVideo({\n\tfullScreen: false, // Sets the video to be fixed to the full window - your <video> and it's container should be direct descendents of the <body> tag\n\tfadeIn: 500, // Milliseconds to fade video in/out (0 for no fade)\n\tpauseAfter: 120, // Seconds to play before pausing (0 for forever)\n\tfadeOnPause: false, // For all (including manual) pauses\n\tfadeOnEnd: true, // When we've reached the pauseAfter time\n\tshowPausePlay: true, // Show pause/play button\n\tpausePlayXPos: 'right', // left|right|center\n\tpausePlayYPos: 'top', // top|bottom|center\n\tpausePlayXOffset: '15px', // pixels or percent from side - ignored if positioned center\n\tpausePlayYOffset: '15px' // pixels or percent from top/bottom - ignored if positioned center\n});\n```\n\nAll options can alternatively be specified in data attributes on your video tag with a `bgvideo` prefix. Just change camel casing to hyphens and lower case. E.g. `fadeIn` becomes `data-bgvideo-fade-in`.\n```html\n<video data-bgvideo=\"true\" data-bgvideo-fade-in=\"2000\" [other video params]>\n```\n\n### Overriding default options\nExample\n```javascript\n$.fn.bgVideo.defaults.fadeIn = 5000;\n$.fn.bgVideo.defaults.showPausePlay = false;\n```\n","maintainers":[{"name":"bgstock","email":"info@branchdigital.com.au"}],"time":{"modified":"2022-06-19T04:58:45.218Z","created":"2015-09-22T07:44:37.641Z","1.0.0":"2015-09-22T07:44:37.641Z","1.1.0":"2019-10-19T02:39:57.836Z"},"homepage":"https://github.com/BGStock/jquery-background-video","keywords":["jquery","background","video","videos","html5"],"repository":{"type":"git","url":"git+https://github.com/BGStock/jquery-background-video.git"},"author":{"name":"BG Stock"},"bugs":{"url":"https://github.com/BGStock/jquery-background-video/issues"},"license":"MIT","readmeFilename":"README.md"}