responsive-videos.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. ( function( $ ) {
  2. var resizeTimer;
  3. function responsiveVideos() {
  4. $( '.jetpack-video-wrapper' ).find( 'embed, iframe, object' ).each( function() {
  5. var _this, videoWidth, videoHeight, videoRatio, videoWrapper, videoMargin, containerWidth;
  6. _this = $( this );
  7. videoMargin = 0;
  8. if ( _this.parents( '.jetpack-video-wrapper' ).prev( 'p' ).css( 'text-align' ) === 'center' ) {
  9. videoMargin = '0 auto';
  10. }
  11. if ( ! _this.attr( 'data-ratio' ) ) {
  12. _this
  13. .attr( 'data-ratio', this.height / this.width )
  14. .attr( 'data-width', this.width )
  15. .attr( 'data-height', this.height )
  16. .css( {
  17. 'display' : 'block',
  18. 'margin' : videoMargin
  19. } );
  20. }
  21. videoWidth = _this.attr( 'data-width' );
  22. videoHeight = _this.attr( 'data-height' );
  23. videoRatio = _this.attr( 'data-ratio' );
  24. videoWrapper = _this.parent();
  25. containerWidth = videoWrapper.width();
  26. if ( videoRatio === 'Infinity' ) {
  27. videoWidth = '100%';
  28. }
  29. _this
  30. .removeAttr( 'height' )
  31. .removeAttr( 'width' );
  32. if ( videoWidth > containerWidth ) {
  33. _this
  34. .width( containerWidth )
  35. .height( containerWidth * videoRatio );
  36. } else {
  37. _this
  38. .width( videoWidth )
  39. .height( videoHeight );
  40. }
  41. } );
  42. }
  43. $( document ).ready( function() {
  44. $( window )
  45. .on( 'load.jetpack', responsiveVideos )
  46. .on( 'resize.jetpack', function() {
  47. clearTimeout( resizeTimer );
  48. resizeTimer = setTimeout( responsiveVideos, 500 );
  49. } )
  50. .on( 'post-load.jetpack', responsiveVideos )
  51. .resize();
  52. } );
  53. } )( jQuery );