Video Background - Version 2.4.0

Version Description

  • Now stable for Wordpress 4.4
  • Modified links to new URL
  • Now using official version of vidbg.js from github.
  • Added shortcode attributes for unmute, overlay, and loop.
Download this release

Release Info

Developer blakedotvegas
Plugin Icon 128x128 Video Background
Version 2.4.0
Comparing to
See all releases

Code changes from version 2.3.0 to 2.4.0

Files changed (7) hide show
  1. README.md +0 -2
  2. candide-vidbg.php +25 -15
  3. images/overlay.png +0 -0
  4. js/{jquery.vidbg.js → dist/vidbg.js} +16 -8
  5. js/dist/vidbg.min.js +6 -0
  6. js/jquery.vidbg-min.js +0 -1
  7. readme.txt +15 -6
README.md DELETED
@@ -1,2 +0,0 @@
1
- # video-background
2
- A Wordpress plugin for video background on any element.
 
 
candide-vidbg.php CHANGED
@@ -1,11 +1,11 @@
1
  <?php
2
  /*
3
  Plugin Name: Video Background
4
- Plugin URI: http://blake.vegas/plugins/video-background/
5
  Description: jQuery WordPress plugin to easily assign a video background to any element. Awesome.
6
  Author: Blake Wilson
7
- Version: 2.3.0
8
- Author URI: http://blake.vegas
9
  */
10
 
11
  /**
@@ -21,7 +21,7 @@ add_action('admin_enqueue_scripts', 'vidbg_metabox_scripts');
21
  * Enqueue vidbg jquery script
22
  */
23
  function vidbg_jquery() {
24
- wp_enqueue_script('vidbg-video-background', plugins_url('/js/jquery.vidbg-min.js', __FILE__), array('jquery'), '2.2.3', true);
25
  }
26
  add_action('wp_footer', 'vidbg_jquery' );
27
 
@@ -232,16 +232,19 @@ add_action( 'wp_footer', 'vidbg_initialize_footer' );
232
  */
233
  function candide_video_background( $atts , $content = null ) {
234
  // Attributes
235
- extract(
236
- shortcode_atts(
237
- array(
238
- 'container' => 'body',
239
- 'mp4' => 'video.mp4',
240
- 'webm' => 'video.webm',
241
- 'poster' => 'poster.jpg',
242
- ), $atts , 'vidbg'
243
- )
244
- );
 
 
 
245
 
246
  // Put It Together
247
  ob_start();
@@ -252,6 +255,10 @@ function candide_video_background( $atts , $content = null ) {
252
  'mp4': '<?php echo $mp4; ?>',
253
  'webm': '<?php echo $webm; ?>',
254
  'poster': '<?php echo $poster; ?>',
 
 
 
 
255
  });
256
  });
257
  <?php
@@ -304,7 +311,10 @@ function vidbg_gettingstarted_page() {
304
  <li>Below the content editor, you should see a metabox titled <b>Video Background</b>. Enter the values for the required fields and publish/update the page.</li>
305
  <li>Enjoy.</li>
306
  </ol>
307
- <p>If you have any suggestions for the plugin or would like to reach out to me you can contact me <a href="mailto:me@blake.vegas">here.</a>
 
 
 
308
  </div>
309
  <?php
310
  }
1
  <?php
2
  /*
3
  Plugin Name: Video Background
4
+ Plugin URI: http://blakewilson.me/projects/video-background/
5
  Description: jQuery WordPress plugin to easily assign a video background to any element. Awesome.
6
  Author: Blake Wilson
7
+ Version: 2.4.0
8
+ Author URI: http://blakewilson.me
9
  */
10
 
11
  /**
21
  * Enqueue vidbg jquery script
22
  */
23
  function vidbg_jquery() {
24
+ wp_enqueue_script('vidbg-video-background', plugins_url('/js/dist/vidbg.min.js', __FILE__), array('jquery'), '1.0.0', true);
25
  }
26
  add_action('wp_footer', 'vidbg_jquery' );
27
 
232
  */
233
  function candide_video_background( $atts , $content = null ) {
234
  // Attributes
235
+ extract(
236
+ shortcode_atts(
237
+ array(
238
+ 'container' => 'body',
239
+ 'mp4' => '#',
240
+ 'webm' => '#',
241
+ 'poster' => '#',
242
+ 'muted' => 'true',
243
+ 'loop' => 'true',
244
+ 'overlay' => 'false',
245
+ ), $atts , 'vidbg'
246
+ )
247
+ );
248
 
249
  // Put It Together
250
  ob_start();
255
  'mp4': '<?php echo $mp4; ?>',
256
  'webm': '<?php echo $webm; ?>',
257
  'poster': '<?php echo $poster; ?>',
258
+ }, {
259
+ muted: <?php echo $muted; ?>,
260
+ loop: <?php echo $loop; ?>,
261
+ overlay: <?php echo $overlay; ?>,
262
  });
263
  });
264
  <?php
311
  <li>Below the content editor, you should see a metabox titled <b>Video Background</b>. Enter the values for the required fields and publish/update the page.</li>
312
  <li>Enjoy.</li>
313
  </ol>
314
+ <p>Alternatively, you can use the shortcode by placing the following code at the bottom of the content editor of the page or post you would like video background on. Here is how it works:<br>
315
+ <code>[vidbg container=&quot;body&quot; mp4=&quot;#&quot; webm=&quot;#&quot; poster=&quot;#&quot; loop=&quot;true&quot; overlay=&quot;false&quot; muted=&quot;false&quot;]</code></p>
316
+ <h3>Questions?</h3>
317
+ <p>If you have any feedback/questions regarding the plugin you can reach me <a href="mailto:hi@blakewilson.me">here.</a>
318
  </div>
319
  <?php
320
  }
images/overlay.png DELETED
Binary file
js/{jquery.vidbg.js → dist/vidbg.js} RENAMED
@@ -1,3 +1,8 @@
 
 
 
 
 
1
  !(function(root, factory) {
2
  if (typeof define === 'function' && define.amd) {
3
  define(['jquery'], factory);
@@ -197,7 +202,6 @@
197
  var $element = vidbg.$element;
198
  var settings = vidbg.settings;
199
  var position = parsePosition(settings.position);
200
- var posterType = settings.posterType;
201
  var $video;
202
  var $wrapper;
203
 
@@ -227,8 +231,6 @@
227
  poster = path.mp4;
228
  } else if (path.webm) {
229
  poster = path.webm;
230
- } else if (path.ogv) {
231
- poster = path.ogv;
232
  }
233
  }
234
  }
@@ -260,16 +262,11 @@
260
  sources += '<source src="' + path.webm + '" type="video/webm">';
261
  }
262
 
263
- if (path.ogv) {
264
- sources += '<source src="' + path.ogv + '" type="video/ogg">';
265
- }
266
-
267
  $video = vidbg.$video = $('<video>' + sources + '</video>');
268
  } else {
269
  $video = vidbg.$video = $('<video>' +
270
  '<source src="' + path + '" type="video/mp4">' +
271
  '<source src="' + path + '" type="video/webm">' +
272
- '<source src="' + path + '" type="video/ogg">' +
273
  '</video>');
274
  }
275
 
@@ -448,6 +445,17 @@
448
  return false;
449
  });
450
 
 
 
 
 
 
 
 
 
 
 
 
451
  });
452
 
453
  });
1
+ /*!
2
+ * Vidbg v1.0 (https://github.com/blakewilson/vidbg)
3
+ * Vidbg By Blake Wilson
4
+ * @license Licensed Under MIT (https://github.com/blakewilson/vidbg/blob/master/LICENSE)
5
+ */
6
  !(function(root, factory) {
7
  if (typeof define === 'function' && define.amd) {
8
  define(['jquery'], factory);
202
  var $element = vidbg.$element;
203
  var settings = vidbg.settings;
204
  var position = parsePosition(settings.position);
 
205
  var $video;
206
  var $wrapper;
207
 
231
  poster = path.mp4;
232
  } else if (path.webm) {
233
  poster = path.webm;
 
 
234
  }
235
  }
236
  }
262
  sources += '<source src="' + path.webm + '" type="video/webm">';
263
  }
264
 
 
 
 
 
265
  $video = vidbg.$video = $('<video>' + sources + '</video>');
266
  } else {
267
  $video = vidbg.$video = $('<video>' +
268
  '<source src="' + path + '" type="video/mp4">' +
269
  '<source src="' + path + '" type="video/webm">' +
 
270
  '</video>');
271
  }
272
 
445
  return false;
446
  });
447
 
448
+ // HTML initialization
449
+ // Add 'data-vidbg-bg' attribute with a path to the video
450
+ // Pass options throw the 'data-vidbg-options' attribute
451
+ $(document).find('[data-' + PLUGIN_NAME + '-bg]').each(function(i, element) {
452
+ var $element = $(element);
453
+ var options = $element.data(PLUGIN_NAME + '-options');
454
+ var path = $element.data(PLUGIN_NAME + '-bg');
455
+
456
+ $element[PLUGIN_NAME](path, options);
457
+ });
458
+
459
  });
460
 
461
  });
js/dist/vidbg.min.js ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
1
+ /*!
2
+ * Vidbg v1.0 (https://github.com/blakewilson/vidbg)
3
+ * Vidbg By Blake Wilson
4
+ * @license Licensed Under MIT (https://github.com/blakewilson/vidbg/blob/master/LICENSE)
5
+ */
6
+ !function(e,t){"function"==typeof define&&define.amd?define(["jquery"],t):t("object"==typeof exports?require("jquery"):e.jQuery)}(this,function($){"use strict";function e(e){var t={},o,i,s,n,r,a,c;for(r=e.replace(/\s*:\s*/g,":").replace(/\s*,\s*/g,",").split(","),c=0,a=r.length;a>c&&(i=r[c],-1===i.search(/^(http|https|ftp):\/\//)&&-1!==i.search(":"));c++)o=i.indexOf(":"),s=i.substring(0,o),n=i.substring(o+1),n||(n=void 0),"string"==typeof n&&(n="true"===n||("false"===n?!1:n)),"string"==typeof n&&(n=isNaN(n)?n:+n),t[s]=n;return null==s&&null==n?e:t}function t(e){e=""+e;var t=e.split(/\s+/),o="50%",i="50%",s,n,r;for(r=0,s=t.length;s>r;r++)n=t[r],"left"===n?o="0%":"right"===n?o="100%":"top"===n?i="0%":"bottom"===n?i="100%":"center"===n?0===r?o="50%":i="50%":0===r?o=n:i=n;return{x:o,y:i}}function o(t,o,i){this.$element=$(t),"string"==typeof o&&(o=e(o)),i?"string"==typeof i&&(i=e(i)):i={},this.settings=$.extend({},s,i),this.path=o;try{this.init()}catch(r){if(r.message!==n)throw r}}var i="vidbg",s={volume:1,playbackRate:1,muted:!0,loop:!0,autoplay:!0,position:"50% 50%",overlay:!1,resizing:!0},n="Not implemented";o.prototype.init=function(){var e=this,o=e.path,s=o,r="",a=e.$element,c=e.settings,d=t(c.position),p,u;u=e.$wrapper=$('<div class="vidbg-container">').css({position:"absolute","z-index":-1,top:0,left:0,bottom:0,right:0,overflow:"hidden","-webkit-background-size":"cover","-moz-background-size":"cover","-o-background-size":"cover","background-size":"cover","background-repeat":"no-repeat","background-position":d.x+" "+d.y}),"object"==typeof o&&(o.poster?s=o.poster:o.mp4?s=o.mp4:o.webm&&(s=o.webm)),u.css("background-image","url("+s+")"),"static"===a.css("position")&&a.css("position","relative"),a.css("z-index","1"),a.is("body")&&u.css({position:"fixed"}),a.prepend(u),"object"==typeof o?(o.mp4&&(r+='<source src="'+o.mp4+'" type="video/mp4">'),o.webm&&(r+='<source src="'+o.webm+'" type="video/webm">'),p=e.$video=$("<video>"+r+"</video>")):p=e.$video=$('<video><source src="'+o+'" type="video/mp4"><source src="'+o+'" type="video/webm"></video>');try{p.prop({autoplay:c.autoplay,loop:c.loop,volume:c.volume,muted:c.muted,defaultMuted:c.muted,playbackRate:c.playbackRate,defaultPlaybackRate:c.playbackRate})}catch(l){throw new Error(n)}p.css({margin:"auto",position:"absolute","z-index":-1,top:d.y,left:d.x,"-webkit-transform":"translate(-"+d.x+", -"+d.y+")","-ms-transform":"translate(-"+d.x+", -"+d.y+")","-moz-transform":"translate(-"+d.x+", -"+d.y+")",transform:"translate(-"+d.x+", -"+d.y+")",visibility:"hidden",opacity:0}).one("canplaythrough."+i,function(){e.resize()}).one("playing."+i,function(){p.css({visibility:"visible",opacity:1}),u.css("background-image","none")}),a.on("resize."+i,function(){c.resizing&&e.resize()}),u.append(p),c.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"))},o.prototype.getVideoObject=function(){return this.$video[0]},o.prototype.resize=function(){if(this.$video){var e=this.$wrapper,t=this.$video,o=t[0],i=o.videoHeight,s=o.videoWidth,n=e.height(),r=e.width();r/s>n/i?t.css({width:r+2,height:"auto"}):t.css({width:"auto",height:n+2})}},o.prototype.destroy=function(){delete $[i].lookup[this.index],this.$video&&this.$video.off(i),this.$element.off(i).removeData(i),this.$wrapper.remove()},$[i]={lookup:[]},$.fn[i]=function(e,t){var s;return this.each(function(){s=$.data(this,i),s&&s.destroy(),s=new o(this,e,t),s.index=$[i].lookup.push(s)-1,$.data(this,i,s)}),this},$(document).ready(function(){var e=$(window);e.on("resize."+i,function(){for(var e=$[i].lookup.length,t=0,o;e>t;t++)o=$[i].lookup[t],o&&o.settings.resizing&&o.resize()}),e.on("unload."+i,function(){return!1}),$(document).find("[data-"+i+"-bg]").each(function(e,t){var o=$(t),s=o.data(i+"-options"),n=o.data(i+"-bg");o[i](n,s)})})});
js/jquery.vidbg-min.js DELETED
@@ -1 +0,0 @@
1
- !function(e,t){"function"==typeof define&&define.amd?define(["jquery"],t):t("object"==typeof exports?require("jquery"):e.jQuery)}(this,function($){"use strict";function e(e){var t={},o,i,s,r,n,a,p;for(n=e.replace(/\s*:\s*/g,":").replace(/\s*,\s*/g,",").split(","),p=0,a=n.length;a>p&&(i=n[p],-1===i.search(/^(http|https|ftp):\/\//)&&-1!==i.search(":"));p++)o=i.indexOf(":"),s=i.substring(0,o),r=i.substring(o+1),r||(r=void 0),"string"==typeof r&&(r="true"===r||("false"===r?!1:r)),"string"==typeof r&&(r=isNaN(r)?r:+r),t[s]=r;return null==s&&null==r?e:t}function t(e){e=""+e;var t=e.split(/\s+/),o="50%",i="50%",s,r,n;for(n=0,s=t.length;s>n;n++)r=t[n],"left"===r?o="0%":"right"===r?o="100%":"top"===r?i="0%":"bottom"===r?i="100%":"center"===r?0===n?o="50%":i="50%":0===n?o=r:i=r;return{x:o,y:i}}function o(t,o,i){this.$element=$(t),"string"==typeof o&&(o=e(o)),i?"string"==typeof i&&(i=e(i)):i={},this.settings=$.extend({},s,i),this.path=o;try{this.init()}catch(n){if(n.message!==r)throw n}}var i="vidbg",s={volume:1,playbackRate:1,muted:!0,loop:!0,autoplay:!0,position:"50% 50%",overlay:!1,resizing:!0},r="Not implemented";o.prototype.init=function(){var e=this,o=e.path,s=o,n="",a=e.$element,p=e.settings,c=t(p.position),d=p.posterType,u,l;l=e.$wrapper=$('<div class="vidbg-container">').css({position:"absolute","z-index":-1,top:0,left:0,bottom:0,right:0,overflow:"hidden","-webkit-background-size":"cover","-moz-background-size":"cover","-o-background-size":"cover","background-size":"cover","background-repeat":"no-repeat","background-position":c.x+" "+c.y}),"object"==typeof o&&(o.poster?s=o.poster:o.mp4?s=o.mp4:o.webm?s=o.webm:o.ogv&&(s=o.ogv)),l.css("background-image","url("+s+")"),"static"===a.css("position")&&a.css("position","relative"),a.css("z-index","1"),a.is("body")&&l.css({position:"fixed"}),a.prepend(l),"object"==typeof o?(o.mp4&&(n+='<source src="'+o.mp4+'" type="video/mp4">'),o.webm&&(n+='<source src="'+o.webm+'" type="video/webm">'),o.ogv&&(n+='<source src="'+o.ogv+'" type="video/ogg">'),u=e.$video=$("<video>"+n+"</video>")):u=e.$video=$('<video><source src="'+o+'" type="video/mp4"><source src="'+o+'" type="video/webm"><source src="'+o+'" type="video/ogg"></video>');try{u.prop({autoplay:p.autoplay,loop:p.loop,volume:p.volume,muted:p.muted,defaultMuted:p.muted,playbackRate:p.playbackRate,defaultPlaybackRate:p.playbackRate})}catch(g){throw new Error(r)}u.css({margin:"auto",position:"absolute","z-index":-1,top:c.y,left:c.x,"-webkit-transform":"translate(-"+c.x+", -"+c.y+")","-ms-transform":"translate(-"+c.x+", -"+c.y+")","-moz-transform":"translate(-"+c.x+", -"+c.y+")",transform:"translate(-"+c.x+", -"+c.y+")",visibility:"hidden",opacity:0}).one("canplaythrough."+i,function(){e.resize()}).one("playing."+i,function(){u.css({visibility:"visible",opacity:1}),l.css("background-image","none")}),a.on("resize."+i,function(){p.resizing&&e.resize()}),l.append(u),p.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"))},o.prototype.getVideoObject=function(){return this.$video[0]},o.prototype.resize=function(){if(this.$video){var e=this.$wrapper,t=this.$video,o=t[0],i=o.videoHeight,s=o.videoWidth,r=e.height(),n=e.width();n/s>r/i?t.css({width:n+2,height:"auto"}):t.css({width:"auto",height:r+2})}},o.prototype.destroy=function(){delete $[i].lookup[this.index],this.$video&&this.$video.off(i),this.$element.off(i).removeData(i),this.$wrapper.remove()},$[i]={lookup:[]},$.fn[i]=function(e,t){var s;return this.each(function(){s=$.data(this,i),s&&s.destroy(),s=new o(this,e,t),s.index=$[i].lookup.push(s)-1,$.data(this,i,s)}),this},$(document).ready(function(){var e=$(window);e.on("resize."+i,function(){for(var e=$[i].lookup.length,t=0,o;e>t;t++)o=$[i].lookup[t],o&&o.settings.resizing&&o.resize()}),e.on("unload."+i,function(){return!1})})});
 
readme.txt CHANGED
@@ -1,10 +1,9 @@
1
  === Plugin Name ===
2
  Contributors: blakedotvegas
3
- Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=VAQJGNKSGAKLS&lc=US&item_name=Video%20Background&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted
4
- Tags: html5, video background, mp4, webm, responsive, shortcode, overlay, fullscreen background, fullscreen, html5 video background, metabox, blake vegas, loop, mute, unmute
5
  Requires at least: 3.2
6
- Tested up to: 4.3.1
7
- Stable tag: 2.3.0
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -30,8 +29,12 @@ There are also 3 additional optional fields for having a more beautiful video ba
30
  * Loop: Enable or disable the looping of your video! Play your video once, or infinite!
31
  * Mute: in Video Background, you now have the option to unmute your audio!
32
 
33
- DEMO:
34
- <http://blake.vegas/plugins/video-background>
 
 
 
 
35
 
36
  == Installation ==
37
 
@@ -73,6 +76,12 @@ To add a video background to a class called **header** add ".header" to the cont
73
 
74
  == Changelog ==
75
 
 
 
 
 
 
 
76
  = 2.3.0 =
77
  * Changed position value when container is set to "body" from "absolute" to "fixed"
78
  * Dissolved pattern image and upgraded to data uri svg
1
  === Plugin Name ===
2
  Contributors: blakedotvegas
3
+ Tags: html5, video background, mp4, webm, responsive, shortcode, overlay, fullscreen background, fullscreen, html5 video background, metabox, blake wilson, loop, mute, unmute
 
4
  Requires at least: 3.2
5
+ Tested up to: 4.4
6
+ Stable tag: 2.4.0
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
29
  * Loop: Enable or disable the looping of your video! Play your video once, or infinite!
30
  * Mute: in Video Background, you now have the option to unmute your audio!
31
 
32
+ There is now a more detailed shortcode for video background. Input this shortcode in the bottom of the content editor of the page or post you would like video background on.
33
+ `[vidbg container="body" mp4="#" webm="#" poster="#" muted="true" loop="true" overlay="false"]`
34
+
35
+
36
+ Demo:
37
+ <http://blakewilson.me/projects/video-background>
38
 
39
  == Installation ==
40
 
76
 
77
  == Changelog ==
78
 
79
+ = 2.4.0 =
80
+ * Now stable for Wordpress 4.4
81
+ * Modified links to new URL
82
+ * Now using official version of vidbg.js from github.
83
+ * Added shortcode attributes for unmute, overlay, and loop.
84
+
85
  = 2.3.0 =
86
  * Changed position value when container is set to "body" from "absolute" to "fixed"
87
  * Dissolved pattern image and upgraded to data uri svg