Video Background - Version 2.3.0

Version Description

  • Changed position value when container is set to "body" from "absolute" to "fixed"
  • Dissolved pattern image and upgraded to data uri svg
  • Cleaned up and optimized code
Download this release

Release Info

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

Code changes from version 2.2.3 to 2.3.0

Files changed (4) hide show
  1. candide-vidbg.php +26 -56
  2. js/jquery.vidbg-min.js +1 -1
  3. js/jquery.vidbg.js +20 -3
  4. readme.txt +12 -7
candide-vidbg.php CHANGED
@@ -4,12 +4,12 @@ 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.2.3
8
  Author URI: http://blake.vegas
9
  */
10
 
11
  /**
12
- * Enqueue metabox style and script
13
  */
14
  function vidbg_metabox_scripts() {
15
  wp_enqueue_style('vidbg-metabox-style', plugins_url('/css/style.css', __FILE__));
@@ -29,20 +29,18 @@ add_action('wp_footer', 'vidbg_jquery' );
29
  * Add Metabox for video background v2
30
  * Added page post type
31
  */
32
- add_action( 'add_meta_boxes', 'vidbg_metabox_add' );
33
- function vidbg_metabox_add( $post_type )
34
- {
35
  $post_types = array( 'post', 'page' );
36
  if ( in_array( $post_type, $post_types )) {
37
  add_meta_box( 'vidbg-metabox', 'Video Background', 'vidbg_meta_box_cb', $post_type, 'normal', 'high' );
38
  }
39
  }
 
40
 
41
  /**
42
  * Create values and metabox form
43
  */
44
- function vidbg_meta_box_cb( $post )
45
- {
46
  $values = get_post_custom( $post->ID );
47
  $container = isset( $values['vidbg_metabox_field_container'] ) ? esc_attr( $values['vidbg_metabox_field_container'][0] ) : '';
48
  $mp4 = isset( $values['vidbg_metabox_field_mp4'] ) ? esc_attr( $values['vidbg_metabox_field_mp4'][0] ) : '';
@@ -136,33 +134,31 @@ function vidbg_meta_box_cb( $post )
136
  </tr>
137
  </tbody>
138
  </table>
139
-
140
  </p>
141
- <?php
142
  }
143
 
144
  /**
145
  * Save the fields
146
  */
147
- add_action( 'save_post', 'vidbg_meta_box_save' );
148
- function vidbg_meta_box_save( $post_id )
149
- {
150
  // Bail if we're doing an auto save
151
  if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
152
-
153
  // if our nonce isn't there, or we can't verify it, bail
154
  if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;
155
-
156
  // if our current user can't edit this post, bail
157
  if( !current_user_can( 'edit_posts' ) ) return;
158
-
159
  // now we can actually save the data
160
- $allowed = array(
161
  'a' => array( // on allow a tags
162
  'href' => array() // and those anchors can only have href attribute
163
  )
164
  );
165
-
166
  //Make sure data is set
167
  if( isset( $_POST['vidbg_metabox_field_container'] ) )
168
  update_post_meta( $post_id, 'vidbg_metabox_field_container', wp_kses( $_POST['vidbg_metabox_field_container'], $allowed ) );
@@ -175,7 +171,7 @@ function vidbg_meta_box_save( $post_id )
175
 
176
  if( isset( $_POST['vidbg_metabox_field_poster'] ) )
177
  update_post_meta( $post_id, 'vidbg_metabox_field_poster', wp_kses( $_POST['vidbg_metabox_field_poster'], $allowed ) );
178
-
179
  $chk = ( isset( $_POST['vidbg_metabox_field_overlay'] ) && $_POST['vidbg_metabox_field_overlay'] ) ? 'on' : 'off';
180
  update_post_meta( $post_id, 'vidbg_metabox_field_overlay', $chk );
181
 
@@ -185,6 +181,7 @@ function vidbg_meta_box_save( $post_id )
185
  $chk3 = ( isset( $_POST['vidbg_metabox_field_unmute'] ) && $_POST['vidbg_metabox_field_unmute'] ) ? 'on' : 'off';
186
  update_post_meta( $post_id, 'vidbg_metabox_field_unmute', $chk3 );
187
  }
 
188
 
189
  /**
190
  * Add inline javascript to footer for video background
@@ -221,43 +218,17 @@ function vidbg_initialize_footer() {
221
  // Options
222
  muted: <?php if($unmute_field == 'on'): ?>false<?php else: ?>true<?php endif; ?>,
223
  loop: <?php if($no_loop_field == 'on'): ?>false<?php else: ?>true<?php endif; ?>,
 
224
  });
225
  });
226
  </script>
227
  <?php endif; ?>
228
- <?php if($pattern_overlay == 'on'): ?>
229
- <script type="text/javascript">
230
- jQuery(function($) {
231
- $( "<div class='vidbg-overlay'></div>" ).insertAfter( $( ".vidbg-container > video" ) );
232
- });
233
- </script>
234
- <?php endif; ?>
235
  <?php }
236
  }
237
  add_action( 'wp_footer', 'vidbg_initialize_footer' );
238
 
239
  /**
240
- * Add overlay css to header
241
- */
242
- function vidbg_initialize_header() {
243
- if(is_page() || is_single() || is_home()) {
244
- if(is_page() || is_single()) {
245
- global $post;
246
- $pattern_overlay = get_post_meta( $post->ID, 'vidbg_metabox_field_overlay', true );
247
- } elseif (is_home()) {
248
- $page_object = get_queried_object();
249
- $pattern_overlay = get_post_meta( $page_object->ID, 'vidbg_metabox_field_overlay', true );
250
- } ?>
251
- <style>
252
- .vidbg-container video::-webkit-media-controls-start-playback-button {display: none !important;-webkit-appearance: none;}
253
- <?php if($pattern_overlay == 'on'): ?>.vidbg-overlay {background: url("<?php echo plugins_url( 'images/overlay.png', __FILE__ ); ?>") repeat;position: absolute;top:0;right:0;left:0;bottom:0;z-index: -1;}<?php endif; ?>
254
- </style>
255
- <?php }
256
- }
257
- add_action( 'wp_head', 'vidbg_initialize_header' );
258
-
259
- /**
260
- * Add Shortcode for v1.0.x versions
261
  */
262
  function candide_video_background( $atts , $content = null ) {
263
  // Attributes
@@ -288,7 +259,7 @@ function candide_video_background( $atts , $content = null ) {
288
  $outputbefore = ob_get_clean();
289
  $outputafter = '</script>';
290
 
291
- //Return
292
 
293
  return $outputbefore . do_shortcode($content) . $outputafter;
294
  }
@@ -297,8 +268,6 @@ add_shortcode( 'vidbg', 'candide_video_background' );
297
  /**
298
  * Add getting started page
299
  */
300
- add_action( 'admin_menu', 'vidbg_add_gettingstarted' );
301
-
302
  function vidbg_add_gettingstarted() {
303
  add_options_page(
304
  'Video Background',
@@ -308,9 +277,10 @@ function vidbg_add_gettingstarted() {
308
  'vidbg_gettingstarted_page'
309
  );
310
  }
 
311
 
312
  /**
313
- * getting started page
314
  */
315
  function vidbg_gettingstarted_page() {
316
  ?>
@@ -342,10 +312,10 @@ function vidbg_gettingstarted_page() {
342
  /**
343
  * Add getting started link on plugin page
344
  */
345
- function vidbg_gettingstarted_link($links) {
346
- $gettingstarted_link = '<a href="options-general.php?page=html5-vidbg">Getting Started</a>';
347
- array_unshift($links, $gettingstarted_link);
348
- return $links;
349
  }
350
- $plugin = plugin_basename(__FILE__);
351
- add_filter("plugin_action_links_$plugin", 'vidbg_gettingstarted_link' );
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
  /**
12
+ * Enqueue backend style and script
13
  */
14
  function vidbg_metabox_scripts() {
15
  wp_enqueue_style('vidbg-metabox-style', plugins_url('/css/style.css', __FILE__));
29
  * Add Metabox for video background v2
30
  * Added page post type
31
  */
32
+ function vidbg_metabox_add( $post_type ) {
 
 
33
  $post_types = array( 'post', 'page' );
34
  if ( in_array( $post_type, $post_types )) {
35
  add_meta_box( 'vidbg-metabox', 'Video Background', 'vidbg_meta_box_cb', $post_type, 'normal', 'high' );
36
  }
37
  }
38
+ add_action( 'add_meta_boxes', 'vidbg_metabox_add' );
39
 
40
  /**
41
  * Create values and metabox form
42
  */
43
+ function vidbg_meta_box_cb( $post ) {
 
44
  $values = get_post_custom( $post->ID );
45
  $container = isset( $values['vidbg_metabox_field_container'] ) ? esc_attr( $values['vidbg_metabox_field_container'][0] ) : '';
46
  $mp4 = isset( $values['vidbg_metabox_field_mp4'] ) ? esc_attr( $values['vidbg_metabox_field_mp4'][0] ) : '';
134
  </tr>
135
  </tbody>
136
  </table>
137
+
138
  </p>
139
+ <?php
140
  }
141
 
142
  /**
143
  * Save the fields
144
  */
145
+ function vidbg_meta_box_save( $post_id ) {
 
 
146
  // Bail if we're doing an auto save
147
  if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
148
+
149
  // if our nonce isn't there, or we can't verify it, bail
150
  if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;
151
+
152
  // if our current user can't edit this post, bail
153
  if( !current_user_can( 'edit_posts' ) ) return;
154
+
155
  // now we can actually save the data
156
+ $allowed = array(
157
  'a' => array( // on allow a tags
158
  'href' => array() // and those anchors can only have href attribute
159
  )
160
  );
161
+
162
  //Make sure data is set
163
  if( isset( $_POST['vidbg_metabox_field_container'] ) )
164
  update_post_meta( $post_id, 'vidbg_metabox_field_container', wp_kses( $_POST['vidbg_metabox_field_container'], $allowed ) );
171
 
172
  if( isset( $_POST['vidbg_metabox_field_poster'] ) )
173
  update_post_meta( $post_id, 'vidbg_metabox_field_poster', wp_kses( $_POST['vidbg_metabox_field_poster'], $allowed ) );
174
+
175
  $chk = ( isset( $_POST['vidbg_metabox_field_overlay'] ) && $_POST['vidbg_metabox_field_overlay'] ) ? 'on' : 'off';
176
  update_post_meta( $post_id, 'vidbg_metabox_field_overlay', $chk );
177
 
181
  $chk3 = ( isset( $_POST['vidbg_metabox_field_unmute'] ) && $_POST['vidbg_metabox_field_unmute'] ) ? 'on' : 'off';
182
  update_post_meta( $post_id, 'vidbg_metabox_field_unmute', $chk3 );
183
  }
184
+ add_action( 'save_post', 'vidbg_meta_box_save' );
185
 
186
  /**
187
  * Add inline javascript to footer for video background
218
  // Options
219
  muted: <?php if($unmute_field == 'on'): ?>false<?php else: ?>true<?php endif; ?>,
220
  loop: <?php if($no_loop_field == 'on'): ?>false<?php else: ?>true<?php endif; ?>,
221
+ overlay: <?php if($pattern_overlay == 'on'): ?>true<?php else: ?>false<?php endif; ?>,
222
  });
223
  });
224
  </script>
225
  <?php endif; ?>
 
 
 
 
 
 
 
226
  <?php }
227
  }
228
  add_action( 'wp_footer', 'vidbg_initialize_footer' );
229
 
230
  /**
231
+ * Shortcode for v1.0.x versions
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
232
  */
233
  function candide_video_background( $atts , $content = null ) {
234
  // Attributes
259
  $outputbefore = ob_get_clean();
260
  $outputafter = '</script>';
261
 
262
+ //Return
263
 
264
  return $outputbefore . do_shortcode($content) . $outputafter;
265
  }
268
  /**
269
  * Add getting started page
270
  */
 
 
271
  function vidbg_add_gettingstarted() {
272
  add_options_page(
273
  'Video Background',
277
  'vidbg_gettingstarted_page'
278
  );
279
  }
280
+ add_action( 'admin_menu', 'vidbg_add_gettingstarted' );
281
 
282
  /**
283
+ * Getting started page content
284
  */
285
  function vidbg_gettingstarted_page() {
286
  ?>
312
  /**
313
  * Add getting started link on plugin page
314
  */
315
+ function vidbg_gettingstarted_link($links) {
316
+ $gettingstarted_link = '<a href="options-general.php?page=html5-vidbg">Getting Started</a>';
317
+ array_unshift($links, $gettingstarted_link);
318
+ return $links;
319
  }
320
+ $plugin = plugin_basename(__FILE__);
321
+ add_filter("plugin_action_links_$plugin", 'vidbg_gettingstarted_link' );
js/jquery.vidbg-min.js CHANGED
@@ -1 +1 @@
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%",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),u=p.posterType,d,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.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">'),d=e.$video=$("<video>"+n+"</video>")):d=e.$video=$('<video><source src="'+o+'" type="video/mp4"><source src="'+o+'" type="video/webm"><source src="'+o+'" type="video/ogg"></video>');try{d.prop({autoplay:p.autoplay,loop:p.loop,volume:p.volume,muted:p.muted,defaultMuted:p.muted,playbackRate:p.playbackRate,defaultPlaybackRate:p.playbackRate})}catch(f){throw new Error(r)}d.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"}).one("canplaythrough."+i,function(){e.resize()}).one("playing."+i,function(){d.css("visibility","visible"),l.css("background-image","none")}),a.on("resize."+i,function(){p.resizing&&e.resize()}),l.append(d)},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})})});
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})})});
js/jquery.vidbg.js CHANGED
@@ -31,6 +31,7 @@
31
  loop: true,
32
  autoplay: true,
33
  position: '50% 50%',
 
34
  resizing: true
35
  };
36
 
@@ -241,6 +242,13 @@
241
  }
242
  $element.css('z-index', '1');
243
 
 
 
 
 
 
 
 
244
  $element.prepend($wrapper);
245
 
246
  if (typeof path === 'object') {
@@ -295,7 +303,8 @@
295
  transform: 'translate(-' + position.x + ', -' + position.y + ')',
296
 
297
  // Disable visibility, while loading
298
- visibility: 'hidden'
 
299
  })
300
 
301
  // Resize a video, when it's loaded
@@ -305,7 +314,10 @@
305
 
306
  // Make it visible, when it's already playing
307
  .one('playing.' + PLUGIN_NAME, function() {
308
- $video.css('visibility', 'visible');
 
 
 
309
  $wrapper.css('background-image', 'none');
310
  });
311
 
@@ -319,6 +331,11 @@
319
 
320
  // Append a video
321
  $wrapper.append($video);
 
 
 
 
 
322
  };
323
 
324
  /**
@@ -433,4 +450,4 @@
433
 
434
  });
435
 
436
- });
31
  loop: true,
32
  autoplay: true,
33
  position: '50% 50%',
34
+ overlay: false,
35
  resizing: true
36
  };
37
 
242
  }
243
  $element.css('z-index', '1');
244
 
245
+ // If the element is set to body make the wrapper position fixed
246
+ if($element.is("body")) {
247
+ $wrapper.css({
248
+ position: 'fixed'
249
+ });
250
+ }
251
+
252
  $element.prepend($wrapper);
253
 
254
  if (typeof path === 'object') {
303
  transform: 'translate(-' + position.x + ', -' + position.y + ')',
304
 
305
  // Disable visibility, while loading
306
+ visibility: 'hidden',
307
+ opacity: 0
308
  })
309
 
310
  // Resize a video, when it's loaded
314
 
315
  // Make it visible, when it's already playing
316
  .one('playing.' + PLUGIN_NAME, function() {
317
+ $video.css({
318
+ visibility: 'visible',
319
+ opacity: 1
320
+ });
321
  $wrapper.css('background-image', 'none');
322
  });
323
 
331
 
332
  // Append a video
333
  $wrapper.append($video);
334
+
335
+ // Set an overlay if settings is true
336
+ if (settings.overlay) {
337
+ $( "<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" ) );
338
+ }
339
  };
340
 
341
  /**
450
 
451
  });
452
 
453
+ });
readme.txt CHANGED
@@ -4,7 +4,7 @@ Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=VAQJG
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.2.3
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -18,7 +18,7 @@ Note: You may need to play around with the element’s z-index for the video bac
18
 
19
  There are 4 simple required fields:
20
 
21
- * Container: This fields specifies where you would like the video background. If you want it to cover the whole website, you would enter "body". If you want the video background to be in a class called ".header" you would enter ".header"
22
  * MP4: Link to the .mp4 file. For Safari and IE support.
23
  * WEBM: Link to the .webm file. For Chrome, Firefox, and Opera support.
24
  * Poster: This will be used for the fallback image if video background is not supported (mobile for example)
@@ -73,11 +73,16 @@ To add a video background to a class called **header** add ".header" to the cont
73
 
74
  == Changelog ==
75
 
 
 
 
 
 
76
  = 2.2.3 =
77
  * Fixed typo in settings submenu
78
 
79
  = 2.2.2 =
80
- * Fixed blurred circle play button bug on iOS devices
81
 
82
  = 2.2.1 =
83
  * Cleaned up code
@@ -85,7 +90,7 @@ To add a video background to a class called **header** add ".header" to the cont
85
 
86
  = 2.2.0 =
87
  * Fixed notices on 404 page when debug mode is set to true
88
- * Fixed blog posts page video background.
89
 
90
  = 2.1.4 =
91
  * Added toggle loop
@@ -109,10 +114,10 @@ To add a video background to a class called **header** add ".header" to the cont
109
  = 2.1.0 =
110
  * Added overlay featured
111
  * Cleaned up code, added comments, etc.
112
- * Dissolved OGV featured, now use video background with only MP4 and WEBM.
113
 
114
  = 2.0.1 =
115
- * Added page post type
116
 
117
  = 2.0.0 =
118
  * Video Background: Now in a metabox! No longer do you have to worry about generating a shortcode.
@@ -134,4 +139,4 @@ To add a video background to a class called **header** add ".header" to the cont
134
  * Updated Readme
135
 
136
  = 1.0 =
137
- * Initial Release
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
 
18
 
19
  There are 4 simple required fields:
20
 
21
+ * Container: This fields specifies where you would like the video background. If you want it to cover the whole website, you would enter "body". If you want the video background to be in a class called ".header" you would enter ".header"
22
  * MP4: Link to the .mp4 file. For Safari and IE support.
23
  * WEBM: Link to the .webm file. For Chrome, Firefox, and Opera support.
24
  * Poster: This will be used for the fallback image if video background is not supported (mobile for example)
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
79
+ * Cleaned up and optimized code
80
+
81
  = 2.2.3 =
82
  * Fixed typo in settings submenu
83
 
84
  = 2.2.2 =
85
+ * Fixed blurred circle play button bug on iOS 9
86
 
87
  = 2.2.1 =
88
  * Cleaned up code
90
 
91
  = 2.2.0 =
92
  * Fixed notices on 404 page when debug mode is set to true
93
+ * Fixed blog posts page video background.
94
 
95
  = 2.1.4 =
96
  * Added toggle loop
114
  = 2.1.0 =
115
  * Added overlay featured
116
  * Cleaned up code, added comments, etc.
117
+ * Dissolved OGV featured, now use video background with only MP4 and WEBM.
118
 
119
  = 2.0.1 =
120
+ * Added page post type
121
 
122
  = 2.0.0 =
123
  * Video Background: Now in a metabox! No longer do you have to worry about generating a shortcode.
139
  * Updated Readme
140
 
141
  = 1.0 =
142
+ * Initial Release