Responsive YouTube embed with max-width for WordPress

responsive-YouTube-embed-with-max-width.js

( function( $ ) {
  'use strict';
  
  // Assumptions:
  // 1. The post content (and the video) will be inside a wrapper with class .post-content
  // 2. The video aspect ratio is 16:9
  // 3. The video will take the full width of the .post-content but will not go beyond a certain width
  
  $( window ).on( 'load resize', function() {
    
    // Take the width of the wrapper
    var contentWidth = $( '.post-content' ).width();
    
    // Define te maximum width of the video
    var videoMaxWidth = 800; // Change this pixel value to something that works for you
    
    // Resize all YouTube iframes according to the wrapper size with 16:9 aspect ratio
    $( '.post-content iframe[src*="https://www.youtube.com"]' ).each( function() {
      if ( $( this ).width() < contentWidth ) {
        $( this ).width( videoMaxWidth );
        $( this ).height( videoMaxWidth * 9 / 16 );
      } else {
        $( this ).width( contentWidth );
        $( this ).height( contentWidth * 9 / 16 );
      }
    } );
  } );
  
} ) ( jQuery );