diff options
Diffstat (limited to 'plugins/jetpack/modules/theme-tools/responsive-videos/responsive-videos.js')
-rw-r--r-- | plugins/jetpack/modules/theme-tools/responsive-videos/responsive-videos.js | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/plugins/jetpack/modules/theme-tools/responsive-videos/responsive-videos.js b/plugins/jetpack/modules/theme-tools/responsive-videos/responsive-videos.js new file mode 100644 index 00000000..668cc7a0 --- /dev/null +++ b/plugins/jetpack/modules/theme-tools/responsive-videos/responsive-videos.js @@ -0,0 +1,63 @@ +( function( $ ) { + var resizeTimer; + + function responsiveVideos() { + $( '.jetpack-video-wrapper' ) + .find( 'embed, iframe, object' ) + .each( function() { + var _this, videoWidth, videoHeight, videoRatio, videoWrapper, videoMargin, containerWidth; + + _this = $( this ); + videoMargin = 0; + + if ( + _this + .parents( '.jetpack-video-wrapper' ) + .prev( 'p' ) + .css( 'text-align' ) === 'center' + ) { + videoMargin = '0 auto'; + } + + if ( ! _this.attr( 'data-ratio' ) ) { + _this + .attr( 'data-ratio', this.height / this.width ) + .attr( 'data-width', this.width ) + .attr( 'data-height', this.height ) + .css( { + display: 'block', + margin: videoMargin, + } ); + } + + videoWidth = _this.attr( 'data-width' ); + videoHeight = _this.attr( 'data-height' ); + videoRatio = _this.attr( 'data-ratio' ); + videoWrapper = _this.parent(); + containerWidth = videoWrapper.width(); + + if ( videoRatio === 'Infinity' ) { + videoWidth = '100%'; + } + + _this.removeAttr( 'height' ).removeAttr( 'width' ); + + if ( videoWidth > containerWidth ) { + _this.width( containerWidth ).height( containerWidth * videoRatio ); + } else { + _this.width( videoWidth ).height( videoHeight ); + } + } ); + } + + $( document ).ready( function() { + $( window ) + .on( 'load.jetpack', responsiveVideos ) + .on( 'resize.jetpack', function() { + clearTimeout( resizeTimer ); + resizeTimer = setTimeout( responsiveVideos, 500 ); + } ) + .on( 'post-load.jetpack', responsiveVideos ) + .resize(); + } ); +} )( jQuery ); |