Merge pull request #9 from blakewilson/v2

V2
blakewilson · Apr 9, 2019 · df88bd6 · df88bd6
2 parents 23a8a35 + 4630526
commit df88bd6
Show file tree

Hide file tree

Showing 17 changed files with 8,188 additions and 1,936 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,84 @@
-.DS_Store
-.codekit-cache
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+    "standard.autoFixOnSave": true,
+    "editor.tabSize": 2,
+}
diff --git a/ATTRIBUTION b/ATTRIBUTION
@@ -1,3 +1 @@
-Original video background project by VodkaBears/Vide licensed under The MIT License (MIT)
-
 Video and fallback image provided by Christophe Tauziet at https://vimeo.com/user27974867
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 Blake Wilson
+Copyright (c) 2019 Blake Wilson
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,74 +1,112 @@
-# Vidbg.js
+# vidbg.js
 
-HTML5 jQuery Video Background plugin.
+A minimal vanilla JavaScript video background plugin.
 
 # Working With Wordpress
 
-If you plan on using Vidbg.js with Wordpress, make your life a little bit easier and download the plugin I made on the [Wordpress Repo](https://wordpress.org/plugins/video-background/).
+If you plan on using vidbg.js with WordPress, make your life a little bit easier and download the plugin I made on the [Wordpress Repo](https://wordpress.org/plugins/video-background/).
 
 # Compatibility
 
 * All modern web browsers
-* IE9+
-* Video will play on desktops and laptops and will resort to the fallback image (poster) on mobile devices (tablets, phones, etc.)
+* IE 11+
+* All mobile web browsers that support autoplaying HTML5 `<video>`
 
 # Instructions
 
-To get started, [download the script](https://github.com/blakedotvegas/supreme_theme/archive/master.zip). Once you have downloaded the script, include it in your project:
+To get started, [download the script](https://github.com/blakewilson/vidbg/releases/latest.zip). Once you have downloaded the script, include it in your project:
 
-`<script src="vidbg.min.js"></script>`
+```html
+<!-- <head> -->
+<link href="dist/vidbg.css" rel="stylesheet" type="text/css">
 
-## Initializing the Script
+<!-- End of <body> -->
+<script src="dist/vidbg.js"></script>
+```
 
-There is two ways to initialize the script; from HTML, and from javascript. Both methods will be shown below.
+## Initializing the Script
 
-### Initialized from HTML
+The script accepts three arguments.
 
-```html
-<div class="vidbg-box" style="width: 650px; height: 338px;"
-  data-vidbg-bg="mp4: http://example.com/video.mp4, webm: path/to/video.webm, poster: path/to/poster.jpg"
-  data-vidbg-options="loop: true, muted: true, overlay: true, overlayColor: #000, overlayAlpha: 0.3">
-</div>
+```js
+var instance = new vidbg(selector, options, attributes)
 ```
 
-### Initialized from Javascript
+The selector argument is any JavaScript selector, the [options](https://github.com/blakewilson/vidbg/tree/v2#options) are for configuring vidbg.js, and the [attributes](https://github.com/blakewilson/vidbg/tree/v2#attributes) argument modifies the actual `<video>` element.
 
 ```js
-$('.vidbg-box').vidbg({
-  'mp4': 'http://example.com/video.mp4',
-  'webm': 'path/to/video.webm',
-  'poster': 'path/to/fallback-image.png',
+
+var instance = new vidbg('.vidbg-box', {
+  mp4: 'http://example.com/video.mp4', // URL or relative path to MP4 video
+  webm: 'path/to/video.webm', // URL or relative path to webm video
+  poster: 'path/to/fallback.jpg', // URL or relative path to fallback image
+  overlay: false, // Boolean to display the overlay or not
+  overlayColor: '#000', // The overlay color as a HEX
+  overlayAlpha: 0.3 // The overlay alpha. Think of this as the last integer in RGBA()
 }, {
-  // options
-});
+  // Attributes
+})
 ```
-
-It is important to note that supplying both `.webm` and `.mp4` will highly increase browser compatibility and it is highly recommended.
+Note: Supplying both `.mp4` and `.webm` will increase browser compatibility.
 
 ## Options
 
 ```js
-{
-  volume: 1,
-  playbackRate: 1,
-  muted: true,
-  loop: true,
-  position: '50% 50%',
-  resizing: true,
+const defaultOptions = {
+  mp4: null,
+  webm: null,
+  poster: null,
   overlay: false,
   overlayColor: '#000',
-  overlayAlpha: '0.3',
+  overlayAlpha: 0.3
 }
 ```
 
-## Resizing
+## Attributes
 
-When resizing is set to true (default) the video will resize automatically when the window is expanded or compressed.
+```js
+const defaultAttributes = {
+  autoplay: true,
+  controls: false,
+  loop: true,
+  muted: true,
+  playsInline: true
+}
+```
 
 ## Overlay
+Setting the `overlay` option to `true` will add an RGBA background over your video. This is helpful when you want to display text or meaningful content over the video background to increase legibility.
+
+## Fallback Image Flashing
+You may experience the fallback image flash on page load. This is because the fallback image is added through JavaScript. As a result of this, it will load after CSS styles are rendered.
+
+If you'd like to combat this, you can preset the fallback image through CSS. For example, if your selector is `.video-box` you could do something like:
+
+```css
+.video-box .vidbg-container {
+  background-image: url(/assets/link-to-fallback.png);
+}
+```
+
+## Methods
 
-Setting `overlay` to `true` will add an RGBA background over your video. This is helpful when your video is primarily white and you have white text on top. `overlay` is set to `false` by default. If set to true, `overlayColor` and `overlayAlpha` are used. `overlayColor` is the color of the overlay in HEX and `overlayAlpha` is the opacity of the overlay specified between `0.0-1`.
+Below are the methods that are available:
+
+```js
+// First, create the vidbg.js instance.
+var instance = new vidbg('.vidbg-box', {
+  mp4: 'http://example.com/video.mp4',
+  webm: 'path/to/video.webm',
+  poster: 'path/to/fallback.jpg',
+})
+
+// Manually resize the video background
+instance.resize()
+
+// Remove the <video> element
+instance.removeVideo()
+```
 
 # License
 
-Vidbg.js is licensed under The MIT License. You can view it [here](https://github.com/blakedotvegas/vidbg/blob/master/LICENSE).
+vidbg.js is licensed under The MIT License. You can view it [here](https://github.com/blakedotvegas/vidbg/blob/master/LICENSE).
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		Original video background project by VodkaBears/Vide licensed under The MIT License (MIT)

		Video and fallback image provided by Christophe Tauziet at https://vimeo.com/user27974867