Video Background - Version 2.1.4

Version Description

  • Added toggle loop
  • Added toggle mute
  • Added advanced section toggle
  • Got rid of the getting started row in the metabox
Download this release

Release Info

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

Code changes from version 2.1.3 to 2.1.4

Files changed (4) hide show
  1. candide-vidbg.php +47 -8
  2. css/style.css +6 -1
  3. js/jquery.backend.js +8 -0
  4. readme.txt +18 -6
candide-vidbg.php CHANGED
@@ -4,23 +4,24 @@ 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.3
8
  Author URI: http://blake.vegas
9
  */
10
 
11
  /**
12
- * Enqueue metabox style
13
  */
14
- function vidbg_metabox_css() {
15
  wp_enqueue_style('vidbg-metabox-style', plugins_url('/css/style.css', __FILE__));
 
16
  }
17
- add_action('admin_enqueue_scripts', 'vidbg_metabox_css');
18
 
19
  /**
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
 
@@ -48,6 +49,8 @@ function vidbg_meta_box_cb( $post )
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' );
52
  ?>
53
  <table class="form-table vidbg_metabox">
@@ -92,6 +95,8 @@ function vidbg_meta_box_cb( $post )
92
  <p class="vidbg_metabox_description">ex: <code>http://example.com/header_video.jpg</code></p>
93
  </td>
94
  </tr>
 
 
95
  <tr class="vidbg-type-text">
96
  <th style="width: 18%">
97
  <label for="vidbg_metabox_field_overlay">Overlay</label>
@@ -103,10 +108,30 @@ function vidbg_meta_box_cb( $post )
103
  </tr>
104
  <tr class="vidbg-type-text">
105
  <th style="width: 18%">
106
- <label>Need some help?</label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  </th>
108
  <td>
109
- <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>
110
  </td>
111
  </tr>
112
  </tbody>
@@ -153,6 +178,12 @@ function vidbg_meta_box_save( $post_id )
153
 
154
  $chk = ( isset( $_POST['vidbg_metabox_field_overlay'] ) && $_POST['vidbg_metabox_field_overlay'] ) ? 'on' : 'off';
155
  update_post_meta( $post_id, 'vidbg_metabox_field_overlay', $chk );
 
 
 
 
 
 
156
  }
157
 
158
  /**
@@ -164,7 +195,9 @@ function vidbg_initialize_footer() {
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): ?>
169
  <script type="text/javascript">
170
  jQuery(function($){
@@ -172,6 +205,10 @@ function vidbg_initialize_footer() {
172
  'mp4': '<?php echo $mp4_field; ?>',
173
  'webm': '<?php echo $webm_field; ?>',
174
  'poster': '<?php echo $poster_field; ?>',
 
 
 
 
175
  });
176
  });
177
  </script>
@@ -278,6 +315,8 @@ function vidbg_gettingstarted_page() {
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.
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.4
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__));
16
+ wp_enqueue_script( 'vidbg-admin-backend', plugin_dir_url( __FILE__ ) . '/js/jquery.backend.js' );
17
  }
18
+ add_action('admin_enqueue_scripts', 'vidbg_metabox_scripts');
19
 
20
  /**
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.1.4', true);
25
  }
26
  add_action('wp_footer', 'vidbg_jquery' );
27
 
49
  $webm = isset( $values['vidbg_metabox_field_webm'] ) ? esc_attr( $values['vidbg_metabox_field_webm'][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
+ $noloop = isset( $values['vidbg_metabox_field_no_loop'] ) ? esc_attr( $values['vidbg_metabox_field_no_loop'][0] ) : '';
53
+ $unmute = isset( $values['vidbg_metabox_field_unmute'] ) ? esc_attr( $values['vidbg_metabox_field_unmute'][0] ) : '';
54
  wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
55
  ?>
56
  <table class="form-table vidbg_metabox">
95
  <p class="vidbg_metabox_description">ex: <code>http://example.com/header_video.jpg</code></p>
96
  </td>
97
  </tr>
98
+ </tbody>
99
+ <tbody class="advanced-options">
100
  <tr class="vidbg-type-text">
101
  <th style="width: 18%">
102
  <label for="vidbg_metabox_field_overlay">Overlay</label>
108
  </tr>
109
  <tr class="vidbg-type-text">
110
  <th style="width: 18%">
111
+ <label for="vidbg_metabox_field_no_loop">Turn Off Loop?</label>
112
+ </th>
113
+ <td>
114
+ <input type="checkbox" name="vidbg_metabox_field_no_loop" id="vidbg_metabox_field_no_loop" <?php checked( $noloop, 'on' ); ?> />
115
+ <p class="vidbg_metabox_description">Turn off the loop for Video Background. Once the video is fully played it will display the last frame of the video.</p>
116
+ </td>
117
+ </tr>
118
+ <tr class="vidbg-type-text">
119
+ <th style="width: 18%">
120
+ <label for="vidbg_metabox_field_unmute">Play the Audio</label>
121
+ </th>
122
+ <td>
123
+ <input type="checkbox" name="vidbg_metabox_field_unmute" id="vidbg_metabox_field_unmute" <?php checked( $unmute, 'on' ); ?> />
124
+ <p class="vidbg_metabox_description">Enabling this will play the audio of the video.</p>
125
+ </td>
126
+ </tr>
127
+ </tbody>
128
+ <tbody>
129
+ <tr class="vidbg-type-text">
130
+ <th style="width: 18%">
131
+ <label></label>
132
  </th>
133
  <td>
134
+ <p class="vidbg_metabox_description"><a href="#advanced-options-panel" class="advanced-options-panel">Advanced Options &raquo;</a></p>
135
  </td>
136
  </tr>
137
  </tbody>
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
+
182
+ $chk2 = ( isset( $_POST['vidbg_metabox_field_no_loop'] ) && $_POST['vidbg_metabox_field_no_loop'] ) ? 'on' : 'off';
183
+ update_post_meta( $post_id, 'vidbg_metabox_field_no_loop', $chk2 );
184
+
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
  /**
195
  $mp4_field = get_post_meta( $post->ID, 'vidbg_metabox_field_mp4', true );
196
  $webm_field = get_post_meta( $post->ID, 'vidbg_metabox_field_webm', true );
197
  $poster_field = get_post_meta( $post->ID, 'vidbg_metabox_field_poster', true );
198
+ $pattern_overlay = get_post_meta( $post->ID, 'vidbg_metabox_field_overlay', true );
199
+ $no_loop_field = get_post_meta( $post->ID, 'vidbg_metabox_field_no_loop', true );
200
+ $unmute_field = get_post_meta( $post->ID, 'vidbg_metabox_field_unmute', true ); ?>
201
  <?php if($container_field): ?>
202
  <script type="text/javascript">
203
  jQuery(function($){
205
  'mp4': '<?php echo $mp4_field; ?>',
206
  'webm': '<?php echo $webm_field; ?>',
207
  'poster': '<?php echo $poster_field; ?>',
208
+ }, {
209
+ // Options
210
+ muted: <?php if($unmute_field == 'on'): ?>false<?php else: ?>true<?php endif; ?>,
211
+ loop: <?php if($no_loop_field == 'on'): ?>false<?php else: ?>true<?php endif; ?>,
212
  });
213
  });
214
  </script>
315
  <li><b>WEBM</b>: This field represents the link to the .webm file. Please place the full link in this field.</li>
316
  <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>
317
  <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>
318
+ <li><b>Turn Off Loop</b>: Turning off loop will result in the video playing only once. After the video is fully finished playing, the last frame of the video will be shown.
319
+ <li><b>Play the Audio</b>: Toggling this option will enable the audio on the video you inputted in the mp4/webm fields.
320
  </ul>
321
  <h3>Getting Started</h3>
322
  <p>To implement Video Background on your website, please follow the instructions below.
css/style.css CHANGED
@@ -60,4 +60,9 @@ table.vidbg_metabox input:focus, table.vidbg_metabox textarea:focus {
60
 
61
  table.vidbg_metabox input[type=checkbox], table.vidbg_metabox input[type=radio] {
62
  margin: 0 5px 0 0;
63
- padding: 0; }
 
 
 
 
 
60
 
61
  table.vidbg_metabox input[type=checkbox], table.vidbg_metabox input[type=radio] {
62
  margin: 0 5px 0 0;
63
+ padding: 0; }
64
+
65
+ table.vidbg_metabox tbody.advanced-options {
66
+ display: none;
67
+ border-top: 1px solid #E9E9E9;
68
+ }
js/jquery.backend.js ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
1
+ (function( $ ) {
2
+ $(function() { //run when the DOM is ready
3
+ $(".advanced-options-panel").click(function() { //use a class, since your ID gets mangled
4
+ $(".advanced-options").toggle("slow"); //add the class to the clicked element
5
+ });
6
+ });
7
+ })( jQuery );
8
+
readme.txt CHANGED
@@ -1,10 +1,10 @@
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.3
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -16,13 +16,19 @@ This plugin is an easy and simple way to add a video background to any element o
16
 
17
  Note: You may need to play around with the element’s z-index for the video background to display properly.
18
 
19
- There are 5 simple 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)
25
- * Overlay: Add a pattern overlay over the video.
 
 
 
 
 
 
26
 
27
  DEMO:
28
  <http://blake.vegas/plugins/video-background>
@@ -47,7 +53,7 @@ Video background works for Internet Explorer 9 and above. Any version below that
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
  = What filetypes are allowed for fallback images? =
53
 
@@ -63,10 +69,16 @@ To add a video background to a class called **header** add ".header" to the cont
63
 
64
  == Screenshots ==
65
 
66
- 1. 5 fields? That’s it? Yep, simply enter in the element you’d like the video background to be in and key in the paths to the video and fallback image. Awesome.
67
 
68
  == Changelog ==
69
 
 
 
 
 
 
 
70
  = 2.1.3 =
71
  * Added last versions changelog
72
  * Added FAQ
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, loop, mute, unmute
5
  Requires at least: 3.2
6
  Tested up to: 4.3.1
7
+ Stable tag: 2.1.4
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
16
 
17
  Note: You may need to play around with the element’s z-index for the video background to display properly.
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)
25
+
26
+
27
+ There are also 3 additional optional fields for having a more beautiful video background:
28
+
29
+ * Overlay: Adds a pattern overlay over the video for optimal reading of text.
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>
53
 
54
  = How would I make a full width/height background video? =
55
 
56
+ Simply fill out the 4 easy fields. Be sure for the container you enter "body" (without the quotes)
57
 
58
  = What filetypes are allowed for fallback images? =
59
 
69
 
70
  == Screenshots ==
71
 
72
+ 1. 4 fields? That’s it? Yep, simply enter in the element you’d like the video background to be in and key in the paths to the video and fallback image. Awesome.
73
 
74
  == Changelog ==
75
 
76
+ = 2.1.4 =
77
+ * Added toggle loop
78
+ * Added toggle mute
79
+ * Added advanced section toggle
80
+ * Got rid of the getting started row in the metabox
81
+
82
  = 2.1.3 =
83
  * Added last versions changelog
84
  * Added FAQ