Merge pull request #4 from blakewilson/version-1.1

Version 1.1

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Blake Wilson
+Copyright (c) 2016 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
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-

README.md

@@ -27,7 +27,7 @@ There is two ways to initialize the script; from HTML, and from javascript. Both
 ```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">
+  data-vidbg-options="loop: true, muted: true, overlay: true, overlayColor: #000, overlayAlpha: 0.3">
 </div>
 ```
 
@@ -56,6 +56,8 @@ It is important to note that supplying both `.webm` and `.mp4` will highly incre
   position: '50% 50%',
   resizing: true,
   overlay: false,
+  overlayColor: '#000',
+  overlayAlpha: '0.3',
 }
 ```
 
@@ -65,7 +67,7 @@ When resizing is set to true (default) the video will resize automatically when
 
 ## Overlay
 
-Setting `overlay` to `true` will add a faint pattern 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.
+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`.
 
 # License
 

demo/elementDemo.html

@@ -41,11 +41,13 @@ <h3>Initialized by javascript</h3>
             muted: true,
             loop: true,
 						overlay: true,
+            overlayColor: '#03A9F4',
+            overlayAlpha: 0.8,
           });
       });
   </script>
 
-  <script src="../dist/vidbg.js"></script>
+  <script src="../dist/vidbg.min.js"></script>
 
 </body>
 </html>

demo/fullscreenDemo.html

@@ -29,11 +29,13 @@ <h3>Fullscreen applied to &lt;body&gt; </h3>
             muted: true,
             loop: true,
   					overlay: true,
+            overlayColor: '#000',
+            overlayAlpha: '0.3',
           });
       });
   </script>
 
-  <script src="../dist/vidbg.js"></script>
+  <script src="../dist/vidbg.min.js"></script>
 
 </body>
 </html>

dist/vidbg.js

@@ -1,5 +1,5 @@
 /*!
- * Vidbg v1.0 (https://github.com/blakewilson/vidbg)
+ * Vidbg v1.1 (https://github.com/blakewilson/vidbg)
  * Vidbg By Blake Wilson
  * @license Licensed Under MIT (https://github.com/blakewilson/vidbg/blob/master/LICENSE)
  */
@@ -37,6 +37,8 @@
     autoplay: true,
     position: '50% 50%',
     overlay: false,
+    overlayColor: '#000',
+    overlayAlpha: 0.3,
     resizing: true
   };
 
@@ -156,6 +158,24 @@
     return { x: x, y: y };
   }
 
+  /*
+   * Hex to RGB
+   */
+  function hexToRgb(hex) {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+  }
+
   /**
    * Vidbg constructor
    * @param {HTMLElement} element
@@ -331,7 +351,7 @@
 
     // Set an overlay if settings is true
     if (settings.overlay) {
-      $( "<div class='vidbg-overlay' style='position:absolute;top:0;right:0;left:0;bottom:0;z-index:-1;background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9yZWN0Pgo8cGF0aCBkPSJNMCA1TDUgMFpNNiA0TDQgNlpNLTEgMUwxIC0xWiIgc3Ryb2tlPSIjMjkyNzI3IiBzdHJva2Utd2lkdGg9IjMuMjUiIG9wYWNpdHk9Ii4yNSI+PC9wYXRoPgo8L3N2Zz4=);'></div>" ).insertAfter( $( ".vidbg-container > video" ) );
+      $( "<div class='vidbg-overlay' style='position:absolute;top:0;right:0;left:0;bottom:0;background: rgba(" + hexToRgb(settings.overlayColor).r + ", " + hexToRgb(settings.overlayColor).g + ", " + hexToRgb(settings.overlayColor).b + ", " + settings.overlayAlpha + ")'></div>" ).insertAfter( $( ".vidbg-container > video" ) );
     }
   };
 

src/vidbg.js

@@ -1,5 +1,5 @@
 /*!
- * Vidbg v1.0 (https://github.com/blakewilson/vidbg)
+ * Vidbg v1.1 (https://github.com/blakewilson/vidbg)
  * Vidbg By Blake Wilson
  * @license Licensed Under MIT (https://github.com/blakewilson/vidbg/blob/master/LICENSE)
  */
@@ -37,6 +37,8 @@
     autoplay: true,
     position: '50% 50%',
     overlay: false,
+    overlayColor: '#000',
+    overlayAlpha: 0.3,
     resizing: true
   };
 
@@ -156,6 +158,24 @@
     return { x: x, y: y };
   }
 
+  /*
+   * Hex to RGB
+   */
+  function hexToRgb(hex) {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+  }
+
   /**
    * Vidbg constructor
    * @param {HTMLElement} element
@@ -331,7 +351,7 @@
 
     // Set an overlay if settings is true
     if (settings.overlay) {
-      $( "<div class='vidbg-overlay' style='position:absolute;top:0;right:0;left:0;bottom:0;z-index:-1;background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9yZWN0Pgo8cGF0aCBkPSJNMCA1TDUgMFpNNiA0TDQgNlpNLTEgMUwxIC0xWiIgc3Ryb2tlPSIjMjkyNzI3IiBzdHJva2Utd2lkdGg9IjMuMjUiIG9wYWNpdHk9Ii4yNSI+PC9wYXRoPgo8L3N2Zz4=);'></div>" ).insertAfter( $( ".vidbg-container > video" ) );
+      $( "<div class='vidbg-overlay' style='position:absolute;top:0;right:0;left:0;bottom:0;background: rgba(" + hexToRgb(settings.overlayColor).r + ", " + hexToRgb(settings.overlayColor).g + ", " + hexToRgb(settings.overlayColor).b + ", " + settings.overlayAlpha + ")'></div>" ).insertAfter( $( ".vidbg-container > video" ) );
     }
   };