responsive-videos.js 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. ( function( $ ) {
  2. $( '.hentry.format-video .entry-media embed, .hentry.format-video .entry-media iframe, .hentry.format-video .entry-media object, .video-wrapper embed, .video-wrapper iframe, .video-wrapper object' ).each( function() {
  3. if ( ! $( this ).attr( 'data-ratio' ) ) {
  4. $( this ).attr( 'data-ratio', this.height / this.width )
  5. .attr( 'data-width', this.width )
  6. .attr( 'data-height', this.height );
  7. }
  8. } );
  9. function responsive_videos() {
  10. $( '.video-wrapper embed, .video-wrapper iframe, .video-wrapper object' ).each( function() {
  11. if ( $( this ).parents( '.wp-block-column' ).length ) {
  12. return;
  13. }
  14. var video_ratio = $( this ).attr( 'data-ratio' ),
  15. video_width = $( this ).attr( 'data-width' ),
  16. video_height = $( this ).attr( 'data-height' );
  17. video_wrapper = $( this ).parent(),
  18. container_width = video_wrapper.width();
  19. if ( video_ratio === 'Infinity' ) {
  20. container_width = '100%';
  21. }
  22. if ( ! $( this ).parent().hasClass( 'embed-jotform' ) ) {
  23. $( this ).removeAttr( 'height' )
  24. .removeAttr( 'width' );
  25. if ( video_width > container_width ) {
  26. $( this ).width( container_width )
  27. .height( container_width * video_ratio );
  28. } else {
  29. $( this ).width( video_width )
  30. .height( video_height );
  31. }
  32. }
  33. } );
  34. $( '.hentry.format-video .entry-media embed, .hentry.format-video .entry-media iframe, .hentry.format-video .entry-media object, .hentry.format-video > .video-wrapper embed, .hentry.format-video > .video-wrapper iframe, .hentry.format-video > .video-wrapper object, .portfolio-entry embed, .portfolio-entry iframe, .portfolio-entry object' ).each( function() {
  35. if ( $( this ).parents( '.wp-block-column' ).length ) {
  36. return;
  37. }
  38. var video_ratio = $( this ).attr( 'data-ratio' ),
  39. video_wrapper = $( this ).parent();
  40. if( $( window ).width() < 768 ) {
  41. var container_width = video_wrapper.width() + 40; // $vspacing * 2
  42. } else if( $( window ).width() < 960 ) {
  43. var container_width = video_wrapper.width() + 80; // $vspacing-double * 2
  44. } else {
  45. var container_width = video_wrapper.width();
  46. }
  47. $( this )
  48. .removeAttr( 'height' )
  49. .removeAttr( 'width' )
  50. .width( container_width )
  51. .height( container_width * video_ratio );
  52. } );
  53. }
  54. responsive_videos();
  55. $( window ).load( responsive_videos ).resize( _.debounce( responsive_videos, 100 ) );
  56. $( document ).on( 'post-load', function() {
  57. $( '.hentry.format-video .entry-media embed, .hentry.format-video .entry-media iframe, .hentry.format-video .entry-media object, .video-wrapper embed, .video-wrapper iframe, .video-wrapper object' ).each( function() {
  58. if ( ! $( this ).attr( 'data-ratio' ) ) {
  59. $( this ).attr( 'data-ratio', this.height / this.width )
  60. .attr( 'data-width', this.width )
  61. .attr( 'data-height', this.height );
  62. }
  63. } );
  64. responsive_videos();
  65. } );
  66. } )( jQuery );