Make the WPMU Video Tutorials Responsive

Hi, Please do you have the answer to making the WPMU video tutorials fit the full width of the container and also be responsive on all devices

here is the page I am showing them https://www.essentialwp.com/wordpress-video-tutorials/

I have granted access to the site.

  • Sajid

    Hi @steve238,

    Hope you are doing good today

    Yes, you can make them contain the full size of container by adding following code in style.css file of your child theme or custom CSS section.

    .wpmudev_video iframe {
      width:100%;
      height:100%;
    }

    Make sure you are using it within 1/1 column in builder.

    Hope that helps! Feel free to post a reply if you need further assistance
    Cheers, Sajid

  • Essential WP

    Hi Sajid,

    So that CSS did not really work for me.

    It made the videos work fine on iphone, but on landscape view, ipad and desktop the width was good but it just stretched the video out of proportion

    Here is where I am now.

    Desktop fine by adding this to each shortcode - height="657" width="100%"

    Mobile OK by adding this CSS

    media only screen
    and (max-width:600px) {
    .wpmudev_video iframe {
    width:100%;
    height:100%;
    }

    but everything in between is either stretched or too high.

    I am all out of ideas now.

    look forward to your reply

    Steve

  • Sajid

    Hi Steve,

    Hope you are doing good today

    Its because you have set the static height parameter with iframe. I have come up with following jQuery based solution that will detect the current screen resolution and resizes the video proportionally on resize and also on reload.

    add_action('wp_footer', 'wpmudev_responsive_iframe', 99);
    
    function wpmudev_responsive_iframe(){ ?>
    <script type="text/javascript">
    	jQuery(document).ready(function($){
    		// Find all iframes
    		var $iframes = $( ".wpmudev_video iframe" );
    
    		// Find & save the aspect ratio for all iframes
    		$iframes.each(function () {
    		  $( this ).data( "ratio", this.height / this.width )
    		    // Remove the hardcoded width & height attributes
    		    .removeAttr( "width" )
    		    .removeAttr( "height" );
    		});
    
    		// Resize the iframes when the window is resized
    		$( window ).resize( function () {
    		  $iframes.each( function() {
    		    // Get the parent container's width
    		    var width = $( this ).parent().width();
    		    $( this ).width( width )
    		      .height( width * $( this ).data( "ratio" ) );
    		  });
    		// Resize to fix all iframes on page load.
    		}).resize();
    	});
    </script>
    
    <?php }

    If you want to make each iframe responsive on your website then simply remove the .wpmudev_video from the following line in above code.
    var $iframes = $( ".wpmudev_video iframe" );

    Update: You need to add this code in functions.php file of your child theme or use mu-plugin.

    Hope that helps! Feel free to post a reply if you need further assistance
    Cheers, Sajid