Video Background - Version 2.1.0

Version Description

  • Added overlay featured
  • Cleaned up code, added comments, etc.
  • Dissolved OGV featured, now use video background with only MP4 and WEBM.
Download this release

Release Info

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

Code changes from version 2.0.1 to 2.1.0

Files changed (6) hide show
  1. candide-vidbg.php +75 -42
  2. images/overlay.png +0 -0
  3. js/jquery.candide-vidbg.min.js +0 -1
  4. js/jquery.vidbg-min.js +1 -0
  5. js/{jquery.candide-vidbg.js → jquery.vidbg.js} +1 -4
  6. readme.txt +19 -10
candide-vidbg.php CHANGED
@@ -4,7 +4,7 @@ Plugin Name: Video Background
4
  Plugin URI: http://blake.vegas
5
  Description: jQuery WordPress plugin to easily assign a video background to any element. Awesome.
6
  Author: Blake Wilson
7
- Version: 2.0.1
8
  Author URI: http://blake.vegas
9
  */
10
 
@@ -20,7 +20,7 @@ add_action('admin_enqueue_scripts', 'vidbg_metabox_css');
20
  * Enqueue vidbg jquery script
21
  */
22
  function vidbg_jquery() {
23
- wp_enqueue_script('vidbg-video-background', plugins_url('/js/jquery.candide-vidbg.min.js', __FILE__), array('jquery'), '2.0', true);
24
  }
25
  add_action('wp_footer', 'vidbg_jquery' );
26
 
@@ -37,6 +37,9 @@ function vidbg_metabox_add( $post_type )
37
  }
38
  }
39
 
 
 
 
40
  function vidbg_meta_box_cb( $post )
41
  {
42
  $values = get_post_custom( $post->ID );
@@ -45,7 +48,7 @@ function vidbg_meta_box_cb( $post )
45
  $webm = isset( $values['vidbg_metabox_field_webm'] ) ? esc_attr( $values['vidbg_metabox_field_webm'][0] ) : '';
46
  $ogv = isset( $values['vidbg_metabox_field_ogv'] ) ? esc_attr( $values['vidbg_metabox_field_ogv'][0] ) : '';
47
  $poster = isset( $values['vidbg_metabox_field_poster'] ) ? esc_attr( $values['vidbg_metabox_field_poster'][0] ) : '';
48
- /* $pattern_overlay = isset( $values['vidbg_metabox_field_overlay'] ) ? esc_attr( $values['vidbg_metabox_field_overlay'][0] ) : ''; */
49
  wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
50
  ?>
51
  <table class="form-table vidbg_metabox">
@@ -56,7 +59,8 @@ function vidbg_meta_box_cb( $post )
56
  </th>
57
  <td>
58
  <input type="text" name="vidbg_metabox_field_container" id="vidbg_metabox_field_container" value="<?php echo $container; ?>" />
59
- <p class="vidbg_metabox_description">Please specify the container you would like your video background in. (Example: <code>.header</code> or <code>body</code>)</p>
 
60
  </td>
61
  </tr>
62
  <tr class="vidbg-type-text">
@@ -65,7 +69,8 @@ function vidbg_meta_box_cb( $post )
65
  </th>
66
  <td>
67
  <input type="text" name="vidbg_metabox_field_mp4" id="vidbg_metabox_field_mp4" value="<?php echo $mp4; ?>" />
68
- <p class="vidbg_metabox_description">Please specify the link to the .mp4 file. (Example: <code>http://example.com/header_video.mp4</code>)</p>
 
69
  </td>
70
  </tr>
71
  <tr class="vidbg-type-text">
@@ -74,16 +79,8 @@ function vidbg_meta_box_cb( $post )
74
  </th>
75
  <td>
76
  <input type="text" name="vidbg_metabox_field_webm" id="vidbg_metabox_field_webm" value="<?php echo $webm; ?>" />
77
- <p class="vidbg_metabox_description">Please specify the link to the .webm file. (Example: <code>http://example.com/header_video.webm</code>)</p>
78
- </td>
79
- </tr>
80
- <tr class="vidbg-type-text">
81
- <th style="width: 18%">
82
- <label for="vidbg_metabox_field_ogv">Link to .ogv</label>
83
- </th>
84
- <td>
85
- <input type="text" name="vidbg_metabox_field_ogv" id="vidbg_metabox_field_ogv" value="<?php echo $ogv; ?>" />
86
- <p class="vidbg_metabox_description">Please specify the link to the .ogv file. (Example: <code>http://example.com/header_video.ogv</code>)</p>
87
  </td>
88
  </tr>
89
  <tr class="vidbg-type-text">
@@ -92,29 +89,27 @@ function vidbg_meta_box_cb( $post )
92
  </th>
93
  <td>
94
  <input type="text" name="vidbg_metabox_field_poster" id="vidbg_metabox_field_poster" value="<?php echo $poster; ?>" />
95
- <p class="vidbg_metabox_description">Please specify the link to the fallback image in case your browser does not support Video Background (Example: <code>http://example.com/header_video.jpg</code>)</p>
 
96
  </td>
97
  </tr>
98
  <tr class="vidbg-type-text">
99
  <th style="width: 18%">
100
- <label for="vidbg_metabox_field_poster">Need some help?</label>
101
  </th>
102
  <td>
103
- <p class="vidbg_metabox_description">If you need some help, checkout the <a href="options-general.php?page=html5-vidbg">getting started</a> page.</p>
 
104
  </td>
105
  </tr>
106
- <?php /*
107
- <!-- Pattern Overlay -->
108
  <tr class="vidbg-type-text">
109
  <th style="width: 18%">
110
- <label for="my_meta_box_check">Pattern Overlay</label>
111
  </th>
112
  <td>
113
- <input type="checkbox" name="my_meta_box_check" id="my_meta_box_check" <?php checked( $check, 'on' ); ?> />
114
- <p class="vidbg_metabox_description">Pattern Overlay</p>
115
  </td>
116
  </tr>
117
- */ ?>
118
  </tbody>
119
  </table>
120
 
@@ -122,7 +117,9 @@ function vidbg_meta_box_cb( $post )
122
  <?php
123
  }
124
 
125
-
 
 
126
  add_action( 'save_post', 'vidbg_meta_box_save' );
127
  function vidbg_meta_box_save( $post_id )
128
  {
@@ -158,31 +155,64 @@ function vidbg_meta_box_save( $post_id )
158
  if( isset( $_POST['vidbg_metabox_field_poster'] ) )
159
  update_post_meta( $post_id, 'vidbg_metabox_field_poster', wp_kses( $_POST['vidbg_metabox_field_poster'], $allowed ) );
160
 
161
- // This is purely my personal preference for saving checkboxes
162
- // $chk = ( isset( $_POST['my_meta_box_check'] ) && $_POST['my_meta_box_check'] ) ? 'on' : 'off';
163
- // update_post_meta( $post_id, 'my_meta_box_check', $chk );
164
  }
165
 
 
 
 
166
  function vidbg_initialize_footer() {
167
  global $post;
168
  $container_field = get_post_meta( $post->ID, 'vidbg_metabox_field_container', true );
169
  $mp4_field = get_post_meta( $post->ID, 'vidbg_metabox_field_mp4', true );
170
  $webm_field = get_post_meta( $post->ID, 'vidbg_metabox_field_webm', true );
171
  $ogv_field = get_post_meta( $post->ID, 'vidbg_metabox_field_ogv', true );
172
- $poster_field = get_post_meta( $post->ID, 'vidbg_metabox_field_poster', true ); ?>
173
- <script type="text/javascript">
174
- jQuery(function($){
175
- $('<?php echo $container_field; ?>').vidbg({
176
- 'mp4': '<?php echo $mp4_field; ?>',
177
- 'webm': '<?php echo $webm_field; ?>',
178
- 'ogv': '<?php echo $ogv_field; ?>',
179
- 'poster': '<?php echo $poster_field; ?>',
180
- });
 
 
 
 
 
 
 
 
181
  });
182
- </script>
 
183
  <?php }
184
  add_action( 'wp_footer', 'vidbg_initialize_footer' );
185
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
186
  /**
187
  * Add Shortcode for v1.0.x versions
188
  */
@@ -223,7 +253,6 @@ function candide_video_background( $atts , $content = null ) {
223
 
224
  return $outputbefore . do_shortcode($content) . $outputafter;
225
  }
226
-
227
  add_shortcode( 'vidbg', 'candide_video_background' );
228
 
229
  /**
@@ -241,6 +270,9 @@ function vidbg_custom_settings() {
241
  );
242
  }
243
 
 
 
 
244
  function vidbg_options_page() {
245
  ?>
246
  <div class="wrap">
@@ -251,20 +283,21 @@ function vidbg_options_page() {
251
  <li><b>Container</b>: This is probably the most important part of the plugin. This field allows you to specifiy whatever element you want for the video background. Say you wanted a full width/height background video playing on your website, you would simply add <code>body</code> to the field.</li>
252
  <li><b>MP4</b>: This field represents the link to the .mp4 file. Please place the full link in this field.</li>
253
  <li><b>WEBM</b>: This field represents the link to the .webm file. Please place the full link in this field.</li>
254
- <li><b>OGV</b>: This field represents the link to the .ogv file. Please place the full link in this field.</li>
255
  <li><b>Poster</b>: The poster is the fallback image in case your browser does not support video background. This fallback image is mostly seen from mobile (video background is not supported on mobile)</li>
 
256
  </ol>
257
  <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>
258
  </div>
259
  <?php
260
  }
261
 
262
- // Add settings link on plugin page
 
 
263
  function vidbg_settings_link($links) {
264
  $settings_link = '<a href="options-general.php?page=html5-vidbg">Settings</a>';
265
  array_unshift($links, $settings_link);
266
  return $links;
267
  }
268
-
269
  $plugin = plugin_basename(__FILE__);
270
  add_filter("plugin_action_links_$plugin", 'vidbg_settings_link' );
4
  Plugin URI: http://blake.vegas
5
  Description: jQuery WordPress plugin to easily assign a video background to any element. Awesome.
6
  Author: Blake Wilson
7
+ Version: 2.1.0
8
  Author URI: http://blake.vegas
9
  */
10
 
20
  * Enqueue vidbg jquery script
21
  */
22
  function vidbg_jquery() {
23
+ wp_enqueue_script('vidbg-video-background', plugins_url('/js/jquery.vidbg-min.js', __FILE__), array('jquery'), '2.1.0', true);
24
  }
25
  add_action('wp_footer', 'vidbg_jquery' );
26
 
37
  }
38
  }
39
 
40
+ /**
41
+ * Create values and metabox form
42
+ */
43
  function vidbg_meta_box_cb( $post )
44
  {
45
  $values = get_post_custom( $post->ID );
48
  $webm = isset( $values['vidbg_metabox_field_webm'] ) ? esc_attr( $values['vidbg_metabox_field_webm'][0] ) : '';
49
  $ogv = isset( $values['vidbg_metabox_field_ogv'] ) ? esc_attr( $values['vidbg_metabox_field_ogv'][0] ) : '';
50
  $poster = isset( $values['vidbg_metabox_field_poster'] ) ? esc_attr( $values['vidbg_metabox_field_poster'][0] ) : '';
51
+ $overlay = isset( $values['vidbg_metabox_field_overlay'] ) ? esc_attr( $values['vidbg_metabox_field_overlay'][0] ) : '';
52
  wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
53
  ?>
54
  <table class="form-table vidbg_metabox">
59
  </th>
60
  <td>
61
  <input type="text" name="vidbg_metabox_field_container" id="vidbg_metabox_field_container" value="<?php echo $container; ?>" />
62
+ <p class="vidbg_metabox_description">Please specify the container you would like your video background in.</p>
63
+ <p class="vidbg_metabox_description">ex: <code>.header</code> or <code>body</code></p>
64
  </td>
65
  </tr>
66
  <tr class="vidbg-type-text">
69
  </th>
70
  <td>
71
  <input type="text" name="vidbg_metabox_field_mp4" id="vidbg_metabox_field_mp4" value="<?php echo $mp4; ?>" />
72
+ <p class="vidbg_metabox_description">Please specify the link to the .mp4 file. MP4 adds support for Safari &amp; IE.</p>
73
+ <p class="vidbg_metabox_description">ex: <code>http://example.com/header_video.mp4</code></p>
74
  </td>
75
  </tr>
76
  <tr class="vidbg-type-text">
79
  </th>
80
  <td>
81
  <input type="text" name="vidbg_metabox_field_webm" id="vidbg_metabox_field_webm" value="<?php echo $webm; ?>" />
82
+ <p class="vidbg_metabox_description">Please specify the link to the .webm file. WEBM adds support for Chrome, Firefox, &amp; Opera.</p>
83
+ <p class="vidbg_metabox_description">ex: <code>http://example.com/header_video.webm</code></p>
 
 
 
 
 
 
 
 
84
  </td>
85
  </tr>
86
  <tr class="vidbg-type-text">
89
  </th>
90
  <td>
91
  <input type="text" name="vidbg_metabox_field_poster" id="vidbg_metabox_field_poster" value="<?php echo $poster; ?>" />
92
+ <p class="vidbg_metabox_description">Please specify the link to the fallback image in case your browser does not support Video Background</p>
93
+ <p class="vidbg_metabox_description">ex: <code>http://example.com/header_video.jpg</code></p>
94
  </td>
95
  </tr>
96
  <tr class="vidbg-type-text">
97
  <th style="width: 18%">
98
+ <label for="vidbg_metabox_field_overlay">Overlay</label>
99
  </th>
100
  <td>
101
+ <input type="checkbox" name="vidbg_metabox_field_overlay" id="vidbg_metabox_field_overlay" <?php checked( $overlay, 'on' ); ?> />
102
+ <p class="vidbg_metabox_description">Add an overlay over the video. This is useful if your text isn&#39;t so clear with a video background.</p>
103
  </td>
104
  </tr>
 
 
105
  <tr class="vidbg-type-text">
106
  <th style="width: 18%">
107
+ <label>Need some help?</label>
108
  </th>
109
  <td>
110
+ <p class="vidbg_metabox_description">If you need some help, checkout the <a href="options-general.php?page=html5-vidbg">getting started</a> page.</p>
 
111
  </td>
112
  </tr>
 
113
  </tbody>
114
  </table>
115
 
117
  <?php
118
  }
119
 
120
+ /**
121
+ * Save the fields
122
+ */
123
  add_action( 'save_post', 'vidbg_meta_box_save' );
124
  function vidbg_meta_box_save( $post_id )
125
  {
155
  if( isset( $_POST['vidbg_metabox_field_poster'] ) )
156
  update_post_meta( $post_id, 'vidbg_metabox_field_poster', wp_kses( $_POST['vidbg_metabox_field_poster'], $allowed ) );
157
 
158
+ $chk = ( isset( $_POST['vidbg_metabox_field_overlay'] ) && $_POST['vidbg_metabox_field_overlay'] ) ? 'on' : 'off';
159
+ update_post_meta( $post_id, 'vidbg_metabox_field_overlay', $chk );
 
160
  }
161
 
162
+ /**
163
+ * Add inline javascript to footer for video background
164
+ */
165
  function vidbg_initialize_footer() {
166
  global $post;
167
  $container_field = get_post_meta( $post->ID, 'vidbg_metabox_field_container', true );
168
  $mp4_field = get_post_meta( $post->ID, 'vidbg_metabox_field_mp4', true );
169
  $webm_field = get_post_meta( $post->ID, 'vidbg_metabox_field_webm', true );
170
  $ogv_field = get_post_meta( $post->ID, 'vidbg_metabox_field_ogv', true );
171
+ $poster_field = get_post_meta( $post->ID, 'vidbg_metabox_field_poster', true );
172
+ $pattern_overlay = get_post_meta( $post->ID, 'vidbg_metabox_field_overlay', true ); ?>
173
+ <?php if($container_field): ?>
174
+ <script type="text/javascript">
175
+ jQuery(function($){
176
+ $('<?php echo $container_field; ?>').vidbg({
177
+ 'mp4': '<?php echo $mp4_field; ?>',
178
+ 'webm': '<?php echo $webm_field; ?>',
179
+ 'poster': '<?php echo $poster_field; ?>',
180
+ });
181
+ });
182
+ </script>
183
+ <?php endif; ?>
184
+ <?php if($pattern_overlay == 'on'): ?>
185
+ <script type="text/javascript">
186
+ jQuery(function($) {
187
+ $( "<div class='vidbg-overlay'></div>" ).insertAfter( $( ".vidbg-container > video" ) );
188
  });
189
+ </script>
190
+ <?php endif; ?>
191
  <?php }
192
  add_action( 'wp_footer', 'vidbg_initialize_footer' );
193
 
194
+ /**
195
+ * Add overlay css to header
196
+ */
197
+ function vidbg_initialize_header() {
198
+ global $post;
199
+ $pattern_overlay = get_post_meta( $post->ID, 'vidbg_metabox_field_overlay', true ); ?>
200
+ <?php if($pattern_overlay == 'on'): ?>
201
+ <style>
202
+ .vidbg-overlay {
203
+ background: url("<?php echo plugins_url( 'images/overlay.png', __FILE__ ); ?>") repeat;
204
+ position: absolute;
205
+ top:0;
206
+ right:0;
207
+ left:0;
208
+ bottom:0;
209
+ z-index: -1;
210
+ }
211
+ </style>
212
+ <?php endif; ?>
213
+ <?php }
214
+ add_action( 'wp_head', 'vidbg_initialize_header' );
215
+
216
  /**
217
  * Add Shortcode for v1.0.x versions
218
  */
253
 
254
  return $outputbefore . do_shortcode($content) . $outputafter;
255
  }
 
256
  add_shortcode( 'vidbg', 'candide_video_background' );
257
 
258
  /**
270
  );
271
  }
272
 
273
+ /**
274
+ * Settings Page
275
+ */
276
  function vidbg_options_page() {
277
  ?>
278
  <div class="wrap">
283
  <li><b>Container</b>: This is probably the most important part of the plugin. This field allows you to specifiy whatever element you want for the video background. Say you wanted a full width/height background video playing on your website, you would simply add <code>body</code> to the field.</li>
284
  <li><b>MP4</b>: This field represents the link to the .mp4 file. Please place the full link in this field.</li>
285
  <li><b>WEBM</b>: This field represents the link to the .webm file. Please place the full link in this field.</li>
 
286
  <li><b>Poster</b>: The poster is the fallback image in case your browser does not support video background. This fallback image is mostly seen from mobile (video background is not supported on mobile)</li>
287
+ <li><b>Overlay</b>: The overlay feature is useful when your video background is the same color as the text and it makes it hard to see. Using this feature will ensure that your text is visible.</li>
288
  </ol>
289
  <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>
290
  </div>
291
  <?php
292
  }
293
 
294
+ /**
295
+ * Add settings link on plugin page
296
+ */
297
  function vidbg_settings_link($links) {
298
  $settings_link = '<a href="options-general.php?page=html5-vidbg">Settings</a>';
299
  array_unshift($links, $settings_link);
300
  return $links;
301
  }
 
302
  $plugin = plugin_basename(__FILE__);
303
  add_filter("plugin_action_links_$plugin", 'vidbg_settings_link' );
images/overlay.png ADDED
Binary file
js/jquery.candide-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%",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>").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})})});
 
js/jquery.vidbg-min.js ADDED
@@ -0,0 +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})})});
js/{jquery.candide-vidbg.js → jquery.vidbg.js} RENAMED
@@ -175,7 +175,6 @@
175
  this.settings = $.extend({}, DEFAULTS, options);
176
  this.path = path;
177
 
178
- // https://github.com/VodkaBears/Vide/issues/110
179
  try {
180
  this.init();
181
  } catch (e) {
@@ -202,7 +201,7 @@
202
  var $wrapper;
203
 
204
  // Set styles of a video wrapper
205
- $wrapper = vidbg.$wrapper = $('<div>').css({
206
  position: 'absolute',
207
  'z-index': -1,
208
  top: 0,
@@ -266,7 +265,6 @@
266
  '</video>');
267
  }
268
 
269
- // https://github.com/VodkaBears/Vide/issues/110
270
  try {
271
  $video
272
 
@@ -429,7 +427,6 @@
429
  }
430
  });
431
 
432
- // https://github.com/VodkaBears/Vide/issues/68
433
  $window.on('unload.' + PLUGIN_NAME, function() {
434
  return false;
435
  });
175
  this.settings = $.extend({}, DEFAULTS, options);
176
  this.path = path;
177
 
 
178
  try {
179
  this.init();
180
  } catch (e) {
201
  var $wrapper;
202
 
203
  // Set styles of a video wrapper
204
+ $wrapper = vidbg.$wrapper = $('<div class="vidbg-container">').css({
205
  position: 'absolute',
206
  'z-index': -1,
207
  top: 0,
265
  '</video>');
266
  }
267
 
 
268
  try {
269
  $video
270
 
427
  }
428
  });
429
 
 
430
  $window.on('unload.' + PLUGIN_NAME, function() {
431
  return false;
432
  });
readme.txt CHANGED
@@ -1,9 +1,9 @@
1
  === Plugin Name ===
2
  Contributors: blakedotvegas
3
- Tags: html5, video background, mp4, webm, ogv, responsive, shortcode
4
- Requires at least: 4.0
5
- Tested up to: 4.3
6
- Stable tag: 2.0.1
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -11,17 +11,17 @@ jQuery WordPress plugin to easily assign a video background to any element. Awes
11
 
12
  == Description ==
13
 
14
- This plugin is an easy and simple way to add video background to any element on your website.
15
 
16
- This is not a plugin for everyone. You may need to play around with the element’s z-index for the video background to display properly.
17
 
18
- There are 5 simple fields that are required:
19
 
20
  * 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"
21
- * MP4: Link to the .mp4 file. Easy enough.
22
- * WEBM: Link to the .webm file. Easy enough.
23
- * OGV: Link to the .ogv file. Easy enough.
24
  * Poster: This will be used for the fallback image if video background is not supported (mobile for example)
 
25
 
26
  == Installation ==
27
 
@@ -33,6 +33,10 @@ Installation is simple.
33
 
34
  == Frequently Asked Questions ==
35
 
 
 
 
 
36
  = How would I make a full width/height background video? =
37
 
38
  Simply fill out the 5 easy fields. Be sure for the container you enter "body" (without the quotes)
@@ -47,6 +51,11 @@ To add a video background to a class called **header** add ".header" to the cont
47
 
48
  == Changelog ==
49
 
 
 
 
 
 
50
  = 2.0.1 =
51
  * Added page post type
52
 
1
  === Plugin Name ===
2
  Contributors: blakedotvegas
3
+ Tags: html5, video background, mp4, webm, responsive, shortcode, overlay
4
+ Requires at least: 3.8
5
+ Tested up to: 4.3.1
6
+ Stable tag: 2.1.0
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
11
 
12
  == Description ==
13
 
14
+ This plugin is an easy and simple way to add a video background to any element on your website.
15
 
16
+ Note: You may need to play around with the element’s z-index for the video background to display properly.
17
 
18
+ There are 5 simple fields:
19
 
20
  * 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"
21
+ * MP4: Link to the .mp4 file. For Safari and IE support.
22
+ * WEBM: Link to the .webm file. For Chrome, Firefox, and Opera support.
 
23
  * Poster: This will be used for the fallback image if video background is not supported (mobile for example)
24
+ * Overlay: Add a pattern overlay over the video.
25
 
26
  == Installation ==
27
 
33
 
34
  == Frequently Asked Questions ==
35
 
36
+ = Is this compatible with Internet Explorer? =
37
+
38
+ Video background works for Internet Explorer 9 and above.
39
+
40
  = How would I make a full width/height background video? =
41
 
42
  Simply fill out the 5 easy fields. Be sure for the container you enter "body" (without the quotes)
51
 
52
  == Changelog ==
53
 
54
+ = 2.1.0 =
55
+ * Added overlay featured
56
+ * Cleaned up code, added comments, etc.
57
+ * Dissolved OGV featured, now use video background with only MP4 and WEBM.
58
+
59
  = 2.0.1 =
60
  * Added page post type
61