Video Background - Version 2.0.0

Version Description

  • Video Background: Now in a metabox! No longer do you have to worry about generating a shortcode.
Download this release

Release Info

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

Code changes from version 1.0.6 to 2.0.0

Files changed (5) hide show
  1. candide-vidbg.php +169 -28
  2. css/style.css +63 -14
  3. images/candide-logo.png +0 -0
  4. js/candide-tinymce.js +0 -41
  5. readme.txt +8 -3
candide-vidbg.php CHANGED
@@ -4,46 +4,185 @@ 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: 1.0.6
8
  Author URI: http://blake.vegas
9
  */
10
 
11
- add_action('admin_head', 'candide_add_button');
12
- add_action('admin_enqueue_scripts', 'candide_tinymce_css');
13
-
14
- function candide_add_button() {
15
- global $typenow;
16
-
17
- if ( !current_user_can('edit_posts') && !current_user_can('edit_pages') ) {
18
- return;
19
- }
20
-
21
- if( ! in_array( $typenow, array( 'post', 'page' ) ) )
22
- return;
23
 
24
- if ( get_user_option('rich_editing') == 'true') {
25
- add_filter("mce_external_plugins", "candide_add_tinymce_plugin");
26
- add_filter('mce_buttons', 'candide_register_tinymce_button');
27
- }
 
28
  }
 
29
 
30
- function candide_add_tinymce_plugin($plugin_array) {
31
- $plugin_array['candide_tinymce_button'] = plugins_url( '/js/candide-tinymce.js', __FILE__ );
32
- return $plugin_array;
 
 
 
 
33
  }
34
 
35
- function candide_register_tinymce_button($buttons) {
36
- array_push($buttons, "candide_tinymce_button");
37
- return $buttons;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  }
39
 
40
- function candide_tinymce_css() {
41
- wp_enqueue_style('candide-tinymce-style', plugins_url('/css/style.css', __FILE__));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  }
43
 
44
- function candide_video_background( $atts , $content = null ) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
 
46
- wp_enqueue_script('candide-video-background', plugins_url('/js/jquery.candide-vidbg.min.js', __FILE__), array('jquery'), '1.0', true);
 
 
 
47
 
48
  // Attributes
49
  extract(
@@ -83,7 +222,9 @@ function candide_video_background( $atts , $content = null ) {
83
 
84
  add_shortcode( 'vidbg', 'candide_video_background' );
85
 
86
-
 
 
87
  add_action( 'admin_menu', 'vidbg_custom_settings' );
88
 
89
  function vidbg_custom_settings() {
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.0
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.candide-vidbg.min.js', __FILE__), array('jquery'), '2.0', true);
24
  }
25
+ add_action('wp_footer', 'vidbg_jquery' );
26
 
27
+ /**
28
+ * Add Metabox for video background v2
29
+ */
30
+ add_action( 'add_meta_boxes', 'vidbg_metabox_add' );
31
+ function vidbg_metabox_add()
32
+ {
33
+ add_meta_box( 'vidbg-metabox', 'Video Background', 'vidbg_meta_box_cb', 'post', 'normal', 'high' );
34
  }
35
 
36
+ function vidbg_meta_box_cb( $post )
37
+ {
38
+ $values = get_post_custom( $post->ID );
39
+ $container = isset( $values['vidbg_metabox_field_container'] ) ? esc_attr( $values['vidbg_metabox_field_container'][0] ) : '';
40
+ $mp4 = isset( $values['vidbg_metabox_field_mp4'] ) ? esc_attr( $values['vidbg_metabox_field_mp4'][0] ) : '';
41
+ $webm = isset( $values['vidbg_metabox_field_webm'] ) ? esc_attr( $values['vidbg_metabox_field_webm'][0] ) : '';
42
+ $ogv = isset( $values['vidbg_metabox_field_ogv'] ) ? esc_attr( $values['vidbg_metabox_field_ogv'][0] ) : '';
43
+ $poster = isset( $values['vidbg_metabox_field_poster'] ) ? esc_attr( $values['vidbg_metabox_field_poster'][0] ) : '';
44
+ /* $pattern_overlay = isset( $values['vidbg_metabox_field_overlay'] ) ? esc_attr( $values['vidbg_metabox_field_overlay'][0] ) : ''; */
45
+ wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
46
+ ?>
47
+ <table class="form-table vidbg_metabox">
48
+ <tbody>
49
+ <tr class="vidbg-type-text">
50
+ <th style="width: 18%">
51
+ <label for="vidbg_metabox_field_container">Container</label>
52
+ </th>
53
+ <td>
54
+ <input type="text" name="vidbg_metabox_field_container" id="vidbg_metabox_field_container" value="<?php echo $container; ?>" />
55
+ <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>
56
+ </td>
57
+ </tr>
58
+ <tr class="vidbg-type-text">
59
+ <th style="width: 18%">
60
+ <label for="vidbg_metabox_field_mp4">Link to .mp4</label>
61
+ </th>
62
+ <td>
63
+ <input type="text" name="vidbg_metabox_field_mp4" id="vidbg_metabox_field_mp4" value="<?php echo $mp4; ?>" />
64
+ <p class="vidbg_metabox_description">Please specify the link to the .mp4 file. (Example: <code>http://example.com/header_video.mp4</code>)</p>
65
+ </td>
66
+ </tr>
67
+ <tr class="vidbg-type-text">
68
+ <th style="width: 18%">
69
+ <label for="vidbg_metabox_field_webm">Link to .webm</label>
70
+ </th>
71
+ <td>
72
+ <input type="text" name="vidbg_metabox_field_webm" id="vidbg_metabox_field_webm" value="<?php echo $webm; ?>" />
73
+ <p class="vidbg_metabox_description">Please specify the link to the .webm file. (Example: <code>http://example.com/header_video.webm</code>)</p>
74
+ </td>
75
+ </tr>
76
+ <tr class="vidbg-type-text">
77
+ <th style="width: 18%">
78
+ <label for="vidbg_metabox_field_ogv">Link to .ogv</label>
79
+ </th>
80
+ <td>
81
+ <input type="text" name="vidbg_metabox_field_ogv" id="vidbg_metabox_field_ogv" value="<?php echo $ogv; ?>" />
82
+ <p class="vidbg_metabox_description">Please specify the link to the .ogv file. (Example: <code>http://example.com/header_video.ogv</code>)</p>
83
+ </td>
84
+ </tr>
85
+ <tr class="vidbg-type-text">
86
+ <th style="width: 18%">
87
+ <label for="vidbg_metabox_field_poster">Link to fallback image</label>
88
+ </th>
89
+ <td>
90
+ <input type="text" name="vidbg_metabox_field_poster" id="vidbg_metabox_field_poster" value="<?php echo $poster; ?>" />
91
+ <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>
92
+ </td>
93
+ </tr>
94
+ <tr class="vidbg-type-text">
95
+ <th style="width: 18%">
96
+ <label for="vidbg_metabox_field_poster">Need some help?</label>
97
+ </th>
98
+ <td>
99
+ <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>
100
+ </td>
101
+ </tr>
102
+ <?php /*
103
+ <!-- Pattern Overlay -->
104
+ <tr class="vidbg-type-text">
105
+ <th style="width: 18%">
106
+ <label for="my_meta_box_check">Pattern Overlay</label>
107
+ </th>
108
+ <td>
109
+ <input type="checkbox" name="my_meta_box_check" id="my_meta_box_check" <?php checked( $check, 'on' ); ?> />
110
+ <p class="vidbg_metabox_description">Pattern Overlay</p>
111
+ </td>
112
+ </tr>
113
+ */ ?>
114
+ </tbody>
115
+ </table>
116
+
117
+ </p>
118
+ <?php
119
  }
120
 
121
+
122
+ add_action( 'save_post', 'vidbg_meta_box_save' );
123
+ function vidbg_meta_box_save( $post_id )
124
+ {
125
+ // Bail if we're doing an auto save
126
+ if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
127
+
128
+ // if our nonce isn't there, or we can't verify it, bail
129
+ if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;
130
+
131
+ // if our current user can't edit this post, bail
132
+ if( !current_user_can( 'edit_post' ) ) return;
133
+
134
+ // now we can actually save the data
135
+ $allowed = array(
136
+ 'a' => array( // on allow a tags
137
+ 'href' => array() // and those anchords can only have href attribute
138
+ )
139
+ );
140
+
141
+ //Make sure data is set
142
+ if( isset( $_POST['vidbg_metabox_field_container'] ) )
143
+ update_post_meta( $post_id, 'vidbg_metabox_field_container', wp_kses( $_POST['vidbg_metabox_field_container'], $allowed ) );
144
+
145
+ if( isset( $_POST['vidbg_metabox_field_mp4'] ) )
146
+ update_post_meta( $post_id, 'vidbg_metabox_field_mp4', wp_kses( $_POST['vidbg_metabox_field_mp4'], $allowed ) );
147
+
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_ogv'] ) )
152
+ update_post_meta( $post_id, 'vidbg_metabox_field_ogv', wp_kses( $_POST['vidbg_metabox_field_ogv'], $allowed ) );
153
+
154
+ if( isset( $_POST['vidbg_metabox_field_poster'] ) )
155
+ update_post_meta( $post_id, 'vidbg_metabox_field_poster', wp_kses( $_POST['vidbg_metabox_field_poster'], $allowed ) );
156
+
157
+ // This is purely my personal preference for saving checkboxes
158
+ // $chk = ( isset( $_POST['my_meta_box_check'] ) && $_POST['my_meta_box_check'] ) ? 'on' : 'off';
159
+ // update_post_meta( $post_id, 'my_meta_box_check', $chk );
160
  }
161
 
162
+ function vidbg_initialize_footer() {
163
+ global $post;
164
+ $container_field = get_post_meta( $post->ID, 'vidbg_metabox_field_container', true );
165
+ $mp4_field = get_post_meta( $post->ID, 'vidbg_metabox_field_mp4', true );
166
+ $webm_field = get_post_meta( $post->ID, 'vidbg_metabox_field_webm', true );
167
+ $ogv_field = get_post_meta( $post->ID, 'vidbg_metabox_field_ogv', true );
168
+ $poster_field = get_post_meta( $post->ID, 'vidbg_metabox_field_poster', true ); ?>
169
+ <script type="text/javascript">
170
+ jQuery(function($){
171
+ $('<?php echo $container_field; ?>').vidbg({
172
+ 'mp4': '<?php echo $mp4_field; ?>',
173
+ 'webm': '<?php echo $webm_field; ?>',
174
+ 'ogv': '<?php echo $ogv_field; ?>',
175
+ 'poster': '<?php echo $poster_field; ?>',
176
+ });
177
+ });
178
+ </script>
179
+ <?php }
180
+ add_action( 'wp_footer', 'vidbg_initialize_footer' );
181
 
182
+ /**
183
+ * Add Shortcode for v1.0.x versions
184
+ */
185
+ function candide_video_background( $atts , $content = null ) {
186
 
187
  // Attributes
188
  extract(
222
 
223
  add_shortcode( 'vidbg', 'candide_video_background' );
224
 
225
+ /**
226
+ * Add Settings Page
227
+ */
228
  add_action( 'admin_menu', 'vidbg_custom_settings' );
229
 
230
  function vidbg_custom_settings() {
css/style.css CHANGED
@@ -1,14 +1,63 @@
1
- i.mce-i-icon {
2
- font: 400 20px/1 dashicons;
3
- padding: 0;
4
- vertical-align: top;
5
- speak: none;
6
- -webkit-font-smoothing: antialiased;
7
- -moz-osx-font-smoothing: grayscale;
8
- margin-left: -2px;
9
- padding-right: 2px
10
- }
11
-
12
- i.candide-icon {
13
- background-image: url('../images/candide-logo.png');
14
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ table.vidbg_metabox {
2
+ clear: both; }
3
+
4
+ .post-new-php table.vidbg_metabox .vidbg-nested-table td, .post-new-php table.vidbg_metabox .repeatable-group th, .post-new-php table.vidbg_metabox .repeatable-group:first-of-type, .post-php table.vidbg_metabox .vidbg-nested-table td, .post-php table.vidbg_metabox .repeatable-group th, .post-php table.vidbg_metabox .repeatable-group:first-of-type, table.vidbg_metabox tbody > tr:first-of-type > td, table.vidbg_metabox tbody > tr:first-of-type > th, table.vidbg_metabox > tr:first-of-type > td, table.vidbg_metabox > tr:first-of-type > th {
5
+ border: 0; }
6
+
7
+ .post-new-php table.vidbg_metabox .repeatable-group, .post-new-php table.vidbg_metabox td, .post-new-php table.vidbg_metabox th, .post-php table.vidbg_metabox .repeatable-group, .post-php table.vidbg_metabox td, .post-php table.vidbg_metabox th {
8
+ border-top: 1px solid #E9E9E9; }
9
+
10
+ .post-new-php table.vidbg_metabox th, .post-php table.vidbg_metabox th {
11
+ text-align: right;
12
+ font-weight: 700; }
13
+
14
+ .post-new-php table.vidbg_metabox table th, .post-php table.vidbg_metabox table th {
15
+ text-align: left; }
16
+
17
+ table.vidbg_metabox th label {
18
+ margin-top: 5px;
19
+ display: block; }
20
+
21
+ p.vidbg_metabox_description {
22
+ color: #AAA;
23
+ font-style: italic;
24
+ margin: 2px 0 !important; }
25
+
26
+ span.vidbg_metabox_description {
27
+ color: #AAA;
28
+ font-style: italic; }
29
+
30
+ table.vidbg_metabox input, table.vidbg_metabox textarea {
31
+ font-size: 14px;
32
+ padding: 5px; }
33
+
34
+ table.vidbg_metabox input[type=text], table.vidbg_metabox textarea {
35
+ width: 97%; }
36
+
37
+ table.vidbg_metabox textarea.vidbg_textarea_code {
38
+ font-family: Consolas,Monaco,monospace;
39
+ line-height: 16px; }
40
+
41
+ table.vidbg_metabox li {
42
+ font-size: 14px;
43
+ margin: 1px 0 5px;
44
+ line-height: 16px; }
45
+
46
+ table.vidbg_metabox ul {
47
+ padding-top: 5px;
48
+ margin: 0; }
49
+
50
+ table.vidbg_metabox select {
51
+ font-size: 14px;
52
+ margin-top: 3px; }
53
+
54
+ table.vidbg_metabox input:focus, table.vidbg_metabox textarea:focus {
55
+ background: #fffff8; }
56
+
57
+ .vidbg_metabox_title {
58
+ margin: 0 0 5px;
59
+ padding: 5px 0 0; }
60
+
61
+ table.vidbg_metabox input[type=checkbox], table.vidbg_metabox input[type=radio] {
62
+ margin: 0 5px 0 0;
63
+ padding: 0; }
images/candide-logo.png DELETED
Binary file
js/candide-tinymce.js DELETED
@@ -1,41 +0,0 @@
1
- (function() {
2
- tinymce.PluginManager.add('candide_tinymce_button', function( editor, url ) {
3
- editor.addButton( 'candide_tinymce_button', {
4
- title: 'Video Background',
5
- icon: 'icon candide-icon',
6
- onclick: function() {
7
- editor.windowManager.open( {
8
- title: 'Insert Video Background',
9
- body: [{
10
- type: 'textbox',
11
- name: 'container',
12
- label: 'Video Container',
13
- },
14
- {
15
- type: 'textbox',
16
- name: 'mp4',
17
- label: 'Link to .mp4'
18
- },
19
- {
20
- type: 'textbox',
21
- name: 'webm',
22
- label: 'Link to .webm'
23
- },
24
- {
25
- type: 'textbox',
26
- name: 'ogv',
27
- label: 'Link to .ogv'
28
- },
29
- {
30
- type: 'textbox',
31
- name: 'poster',
32
- label: 'Link to poster image (fallback)'
33
- }],
34
- onsubmit: function( e ) {
35
- editor.insertContent( '[vidbg container="' + e.data.container + '" mp4="' + e.data.mp4 + '" webm="' + e.data.webm + '" ogv="' + e.data.ogv + '" poster="' + e.data.poster + '"]');
36
- }
37
- });
38
- }
39
- });
40
- });
41
- })();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
readme.txt CHANGED
@@ -3,7 +3,7 @@ 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: 1.0.6
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -43,11 +43,16 @@ To add a video background to a class called **header** add ".header" to the cont
43
 
44
  == Screenshots ==
45
 
46
- 1. No pop ups, ads, or inconsistency. Just click the TinyMCE button and you're ready to go.
47
- 2. 5 Fields? That's it?
48
 
49
  == Changelog ==
50
 
 
 
 
 
 
 
51
  = 1.0.4 =
52
  * Getting Started/settings page added
53
 
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.0
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
43
 
44
  == Screenshots ==
45
 
46
+ 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.
 
47
 
48
  == Changelog ==
49
 
50
+ = 2.0.0 =
51
+ * Video Background: Now in a metabox! No longer do you have to worry about generating a shortcode.
52
+
53
+ = 1.0.6 =
54
+ * Fixed path to js file
55
+
56
  = 1.0.4 =
57
  * Getting Started/settings page added
58