Ei kuvausta

responsive-videos.js 1.5KB

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