Video Background - Version 2.1.1

Version Description

  • Added FAQ
  • Added instructions on settings page
  • Cleaned up code
  • Changed plugin compatibility
Download this release

Release Info

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

Code changes from version 2.1.0 to 2.1.1

Files changed (2) hide show
  1. candide-vidbg.php +24 -24
  2. readme.txt +22 -4
candide-vidbg.php CHANGED
@@ -1,10 +1,10 @@
1
  <?php
2
  /*
3
  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.1.0
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.vidbg-min.js', __FILE__), array('jquery'), '2.1.0', true);
24
  }
25
  add_action('wp_footer', 'vidbg_jquery' );
26
 
@@ -46,7 +46,6 @@ function vidbg_meta_box_cb( $post )
46
  $container = isset( $values['vidbg_metabox_field_container'] ) ? esc_attr( $values['vidbg_metabox_field_container'][0] ) : '';
47
  $mp4 = isset( $values['vidbg_metabox_field_mp4'] ) ? esc_attr( $values['vidbg_metabox_field_mp4'][0] ) : '';
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' );
@@ -135,7 +134,7 @@ function vidbg_meta_box_save( $post_id )
135
  // now we can actually save the data
136
  $allowed = array(
137
  'a' => array( // on allow a tags
138
- 'href' => array() // and those anchords can only have href attribute
139
  )
140
  );
141
 
@@ -149,9 +148,6 @@ function vidbg_meta_box_save( $post_id )
149
  if( isset( $_POST['vidbg_metabox_field_webm'] ) )
150
  update_post_meta( $post_id, 'vidbg_metabox_field_webm', wp_kses( $_POST['vidbg_metabox_field_webm'], $allowed ) );
151
 
152
- if( isset( $_POST['vidbg_metabox_field_ogv'] ) )
153
- update_post_meta( $post_id, 'vidbg_metabox_field_ogv', wp_kses( $_POST['vidbg_metabox_field_ogv'], $allowed ) );
154
-
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
 
@@ -167,7 +163,6 @@ function vidbg_initialize_footer() {
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): ?>
@@ -225,7 +220,6 @@ function candide_video_background( $atts , $content = null ) {
225
  'container' => 'body',
226
  'mp4' => 'video.mp4',
227
  'webm' => 'video.webm',
228
- 'ogv' => 'video.ogv',
229
  'poster' => 'poster.jpg',
230
  ), $atts , 'vidbg'
231
  )
@@ -240,7 +234,6 @@ function candide_video_background( $atts , $content = null ) {
240
  $('<?php echo $container; ?>').vidbg({
241
  'mp4': '<?php echo $mp4; ?>',
242
  'webm': '<?php echo $webm; ?>',
243
- 'ogv': '<?php echo $ogv; ?>',
244
  'poster': '<?php echo $poster; ?>',
245
  });
246
  });
@@ -256,35 +249,42 @@ function candide_video_background( $atts , $content = null ) {
256
  add_shortcode( 'vidbg', 'candide_video_background' );
257
 
258
  /**
259
- * Add Settings Page
260
  */
261
- add_action( 'admin_menu', 'vidbg_custom_settings' );
262
 
263
- function vidbg_custom_settings() {
264
  add_options_page(
265
  'Video Background',
266
  'Video Backgroud',
267
  'manage_options',
268
  'html5-vidbg',
269
- 'vidbg_options_page'
270
  );
271
  }
272
 
273
  /**
274
- * Settings Page
275
  */
276
- function vidbg_options_page() {
277
  ?>
278
  <div class="wrap">
279
  <h2>Video Background</h2>
280
- <h4>Getting Started</h4>
281
  <p>Video background makes it easy to add responsive, great looking video backgrounds to any element on your website. Below, you will find out what each feild does.</p>
282
- <ol>
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>
@@ -292,12 +292,12 @@ function vidbg_options_page() {
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' );
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.1.1
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.1', true);
24
  }
25
  add_action('wp_footer', 'vidbg_jquery' );
26
 
46
  $container = isset( $values['vidbg_metabox_field_container'] ) ? esc_attr( $values['vidbg_metabox_field_container'][0] ) : '';
47
  $mp4 = isset( $values['vidbg_metabox_field_mp4'] ) ? esc_attr( $values['vidbg_metabox_field_mp4'][0] ) : '';
48
  $webm = isset( $values['vidbg_metabox_field_webm'] ) ? esc_attr( $values['vidbg_metabox_field_webm'][0] ) : '';
 
49
  $poster = isset( $values['vidbg_metabox_field_poster'] ) ? esc_attr( $values['vidbg_metabox_field_poster'][0] ) : '';
50
  $overlay = isset( $values['vidbg_metabox_field_overlay'] ) ? esc_attr( $values['vidbg_metabox_field_overlay'][0] ) : '';
51
  wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
134
  // now we can actually save the data
135
  $allowed = array(
136
  'a' => array( // on allow a tags
137
+ 'href' => array() // and those anchors can only have href attribute
138
  )
139
  );
140
 
148
  if( isset( $_POST['vidbg_metabox_field_webm'] ) )
149
  update_post_meta( $post_id, 'vidbg_metabox_field_webm', wp_kses( $_POST['vidbg_metabox_field_webm'], $allowed ) );
150
 
 
 
 
151
  if( isset( $_POST['vidbg_metabox_field_poster'] ) )
152
  update_post_meta( $post_id, 'vidbg_metabox_field_poster', wp_kses( $_POST['vidbg_metabox_field_poster'], $allowed ) );
153
 
163
  $container_field = get_post_meta( $post->ID, 'vidbg_metabox_field_container', true );
164
  $mp4_field = get_post_meta( $post->ID, 'vidbg_metabox_field_mp4', true );
165
  $webm_field = get_post_meta( $post->ID, 'vidbg_metabox_field_webm', true );
 
166
  $poster_field = get_post_meta( $post->ID, 'vidbg_metabox_field_poster', true );
167
  $pattern_overlay = get_post_meta( $post->ID, 'vidbg_metabox_field_overlay', true ); ?>
168
  <?php if($container_field): ?>
220
  'container' => 'body',
221
  'mp4' => 'video.mp4',
222
  'webm' => 'video.webm',
 
223
  'poster' => 'poster.jpg',
224
  ), $atts , 'vidbg'
225
  )
234
  $('<?php echo $container; ?>').vidbg({
235
  'mp4': '<?php echo $mp4; ?>',
236
  'webm': '<?php echo $webm; ?>',
 
237
  'poster': '<?php echo $poster; ?>',
238
  });
239
  });
249
  add_shortcode( 'vidbg', 'candide_video_background' );
250
 
251
  /**
252
+ * Add getting started page
253
  */
254
+ add_action( 'admin_menu', 'vidbg_add_gettingstarted' );
255
 
256
+ function vidbg_add_gettingstarted() {
257
  add_options_page(
258
  'Video Background',
259
  'Video Backgroud',
260
  'manage_options',
261
  'html5-vidbg',
262
+ 'vidbg_gettingstarted_page'
263
  );
264
  }
265
 
266
  /**
267
+ * getting started page
268
  */
269
+ function vidbg_gettingstarted_page() {
270
  ?>
271
  <div class="wrap">
272
  <h2>Video Background</h2>
273
+ <h3>Usability</h3>
274
  <p>Video background makes it easy to add responsive, great looking video backgrounds to any element on your website. Below, you will find out what each feild does.</p>
275
+ <ul>
276
  <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>
277
  <li><b>MP4</b>: This field represents the link to the .mp4 file. Please place the full link in this field.</li>
278
  <li><b>WEBM</b>: This field represents the link to the .webm file. Please place the full link in this field.</li>
279
  <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>
280
  <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>
281
+ </ul>
282
+ <h3>Getting Started</h3>
283
+ <p>To implement Video Background on your website, please follow the instructions below.
284
+ <ol>
285
+ <li>Edit the page or post you would like the video background to be on.</li>
286
+ <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>
287
+ <li>Enjoy.</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>
292
  }
293
 
294
  /**
295
+ * Add getting started link on plugin page
296
  */
297
+ function vidbg_gettingstarted_link($links) {
298
+ $gettingstarted_link = '<a href="options-general.php?page=html5-vidbg">Getting Started</a>';
299
+ array_unshift($links, $gettingstarted_link);
300
  return $links;
301
  }
302
  $plugin = plugin_basename(__FILE__);
303
+ add_filter("plugin_action_links_$plugin", 'vidbg_gettingstarted_link' );
readme.txt CHANGED
@@ -1,9 +1,10 @@
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
 
@@ -23,6 +24,9 @@ There are 5 simple fields:
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
 
28
  Installation is simple.
@@ -33,14 +37,22 @@ Installation is simple.
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)
43
 
 
 
 
 
44
  = I want to add a video background to a class called "header", how would I do that? =
45
 
46
  To add a video background to a class called **header** add ".header" to the container field. (without the quotes)
@@ -51,6 +63,12 @@ To add a video background to a class called **header** add ".header" to the cont
51
 
52
  == Changelog ==
53
 
 
 
 
 
 
 
54
  = 2.1.0 =
55
  * Added overlay featured
56
  * Cleaned up code, added comments, etc.
1
  === Plugin Name ===
2
  Contributors: blakedotvegas
3
+ Donate link: http://blake.vegas/plugins/video-background/
4
+ Tags: html5, video background, mp4, webm, responsive, shortcode, overlay, fullscreen background, fullscreen, html5 video background, metabox, blake vegas
5
+ Requires at least: 3.2
6
  Tested up to: 4.3.1
7
+ Stable tag: 2.1.1
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
24
  * Poster: This will be used for the fallback image if video background is not supported (mobile for example)
25
  * Overlay: Add a pattern overlay over the video.
26
 
27
+ DEMO:
28
+ [http://blake.vegas/plugins/video-background/](http://blake.vegas/plugins/video-background/ “Video Background Demo”)
29
+
30
  == Installation ==
31
 
32
  Installation is simple.
37
 
38
  == Frequently Asked Questions ==
39
 
40
+ = What size is recommended for the videos? =
41
+
42
+ 15mb is usually best for me, I try to not exceed that. Any video after 15mb starts to slow down and sometimes will not load. A great compression tool for Video Background is [Clip Champ](https://clipchamp.com/ “Clip Champ”). Check with your hosting provider to make sure you have enough bandwidth for video backgrounds.
43
+
44
  = Is this compatible with Internet Explorer? =
45
 
46
+ Video background works for Internet Explorer 9 and above. Any version below that will use the fallback image.
47
 
48
  = How would I make a full width/height background video? =
49
 
50
  Simply fill out the 5 easy fields. Be sure for the container you enter "body" (without the quotes)
51
 
52
+ = I entered all the correct fields, but my video will still not load. What am I doing wrong? =
53
+
54
+ This can be an issue with the file size of the video you are uploading. Make sure that you video is compressed and is does not exceed 15mb. Once you get over 15mb, it takes a while to load. Check with your hosting provider to make sure you have enough bandwidth for video backgrounds.
55
+
56
  = I want to add a video background to a class called "header", how would I do that? =
57
 
58
  To add a video background to a class called **header** add ".header" to the container field. (without the quotes)
63
 
64
  == Changelog ==
65
 
66
+ = 2.1.1 =
67
+ * Added FAQ
68
+ * Added instructions on settings page
69
+ * Cleaned up code
70
+ * Changed plugin compatibility
71
+
72
  = 2.1.0 =
73
  * Added overlay featured
74
  * Cleaned up code, added comments, etc.