“Responsive Iframes — The Right Way (CSS Only)!” was originally published on the 19th of March 2014, last updated July 24, 2018 to reflect emerging trends.
Responsive iframes are a cinch! Jump start using the responsive iframe CSS (using intrinsic ratios) shown below to make your iframe responsive. You’ll never ask ‘how to make iframe responsive’ again!
.iframe-container { overflow: hidden; padding-top: 56.25%; position: relative; } .iframe-container iframe { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
padding-top
property to reflect the aspect ratio to make iframe responsive.Continue reading “Responsive Iframes — The Right Way (CSS Only)!”