Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Responsive video option.

  • Loading branch information...
commit 6ac93ff4a46ff56a7854be42e86a9195d1d49370 1 parent ee9a0ca
@nosecreek nosecreek authored
Showing with 53 additions and 2 deletions.
  1. +11 −1 admin.php
  2. +21 −0 responsive-video.css
  3. +21 −1 video-js.php
View
12 admin.php
@@ -17,6 +17,7 @@ function videojs_help($contextual_help, $screen_in, $screen) {
$contextual_help = <<<_end_
<p><strong>Video.js Settings Screen</strong></p>
<p>The values set here will be the default values for all videos, unless you specify differently in the shortcode. Uncheck <em>Use CDN hosted version?</em> if you want to use a self-hosted copy of Video.js instead of the CDN hosted version. <strong>Using the CDN hosted version is preferable in most situations.</strong></p>
+ <p>If you are using a responsive WordPress theme, you may want to check the <em>Responsive Video</em> checkbox.</p>
_end_;
}
return $contextual_help;
@@ -58,6 +59,8 @@ function register_videojs_settings() {
add_settings_field('videojs_preload', 'Preload', 'preload_output', 'videojs-settings', 'videojs_defaults');
add_settings_field('videojs_autoplay', 'Autoplay', 'autoplay_output', 'videojs-settings', 'videojs_defaults');
+ add_settings_field('videojs_responsive', 'Responsive Video', 'responsive_output', 'videojs-settings', 'videojs_defaults');
+
add_settings_field('videojs_cdn', 'Use CDN hosted version?', 'cdn_output', 'videojs-settings', 'videojs_defaults');
add_settings_field('videojs_reset', 'Restore defaults upon plugin deactivation/reactivation', 'reset_output', 'videojs-settings', 'videojs_defaults');
@@ -70,6 +73,7 @@ function videojs_options_validate($input) {
$newinput['videojs_width'] = $input['videojs_width'];
$newinput['videojs_preload'] = $input['videojs_preload'];
$newinput['videojs_autoplay'] = $input['videojs_autoplay'];
+ $newinput['videojs_responsive'] = $input['videojs_responsive'];
$newinput['videojs_cdn'] = $input['videojs_cdn'];
$newinput['videojs_reset'] = $input['videojs_reset'];
@@ -112,6 +116,12 @@ function autoplay_output() {
echo "<input ".$checked." id='videojs_autoplay' name='videojs_options[videojs_autoplay]' type='checkbox' />";
}
+function responsive_output() {
+ $options = get_option('videojs_options');
+ if($options['videojs_responsive']) { $checked = ' checked="checked" '; } else { $checked = ''; }
+ echo "<input ".$checked." id='videojs_responsive' name='videojs_options[videojs_responsive]' type='checkbox' />";
+}
+
function cdn_output() {
$options = get_option('videojs_options');
if($options['videojs_cdn']) { $checked = ' checked="checked" '; } else { $checked = ''; }
@@ -131,7 +141,7 @@ function reset_output() {
function add_defaults_fn() {
$tmp = get_option('videojs_options');
if(($tmp['videojs_reset']=='on')||(!is_array($tmp))) {
- $arr = array("videojs_height"=>"264","videojs_width"=>"640","videojs_preload"=>"","videojs_autoplay"=>"","videojs_cdn"=>"on","videojs_reset"=>"");
+ $arr = array("videojs_height"=>"264","videojs_width"=>"640","videojs_preload"=>"","videojs_autoplay"=>"","videojs_responsive"=>"","videojs_cdn"=>"on","videojs_reset"=>"");
update_option('videojs_options', $arr);
}
}
View
21 responsive-video.css
@@ -0,0 +1,21 @@
+.video-wrapper {
+ position: relative;
+ padding-bottom: 74.25%; /* 4:3 ratio */
+ padding-top: 30px; /* IE6 workaround*/
+ height: 0;
+ overflow: hidden;
+}
+
+video,.videoWrapper,.video-js {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.video-js, img.vjs-poster {
+ width: 100% !important;
+ height: 100% !important; //these need !important because IE wants to set height/width to 100px
+ max-width: 100%;
+}
View
22 video-js.php
@@ -37,6 +37,11 @@ function add_videojs_header(){
</script>
';
}
+
+ if($options['videojs_responsive'] == 'on') { //include the responsive stylesheet
+ wp_register_style( 'responsive-videojs', plugins_url('responsive-video.css', __FILE__) );
+ wp_enqueue_style( 'responsive-videojs' );
+ }
}
add_action('wp_head','add_videojs_header');
@@ -137,7 +142,22 @@ function video_shortcode($atts, $content=null){
<!-- End Video.js -->
_end_;
-
+
+ if($options['videojs_responsive'] == 'on') { //add the responsive wrapper
+ $ratio = $height/$width*100;
+ $videojs = <<<_end_
+
+ <!-- Begin Video.js Responsive Wrapper -->
+ <div style='max-width:{$width}px;'>
+ <div class='video-wrapper' style='padding-bottom:{$ratio}%;'>
+ {$videojs}
+ </div>
+ </div>
+ <!-- End Video.js Responsive Wrapper -->
+
+_end_;
+ }
+
return $videojs;
}
Please sign in to comment.
Something went wrong with that request. Please try again.