In my last post I embedded a couple of Youtube videos.

At first they weren't full width. Then they were full width, but very short! Only 150px tall in fact, and fixed at that height. Then they were full width and had the right height, but broke out of the side of their parent containers on mobile. Not ideal!

A comprehensive search yielded lots of solutions, but they all seemed quite convoluted and clunky. I couldn't really find anything small and elegant.

Eventually I realised the best thing to do was to set the width of each iFrame using CSS, and then I could change the height of each iFrame using Javascript. Simple, lightweight, repeatable. Nice.

First, the CSS.

  
    iframe {
      width: 100%;
    }
  

I told you it was easy!

Next, the Javascript. First up we set the height of the iFrame and then we repeat the function each time the screen size changes. Full width, fully responsive, good to go!

  
    // Make iFrames beautifully responsive with native ratio

    // Get absolute width of iFrame and set height using known ratio (for Youtube it's 0.5625)
  	function keepRatio() {
  		var iframeWidth = $( "iframe" ).width();
  		$('iframe').height(iframeWidth * 0.5625);
  	}

    // Sets initial height of iFrame
  	keepRatio();

    // Update the height of your iFrame when window resizes
  	$(window).resize(function() {
  		keepRatio();
  	});

  

In its current state, this targets all iFrames regardless of their source, but of course it would be very easy to target individual or groups of iFrames using IDs and classes. Over to you! Enjoy.