How to Create Responsive Iframes

Fleeting

• Référence externe : https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
• see
  • intrinsic ratios,
  • Responsive iframes — The Right Way (CSS Only)! | Ben Marshall,

How To Create Responsive Iframes

<div class=“container”> <iframe class=“responsive-iframe” src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div>

.container { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; * 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) * }

* Then style the iframe to fit in the container div with full height and width * .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }

.container { padding-top: 75%; * 4:3 Aspect Ratio * }

Add a percentage value for padding-top to maintain the aspect ratio of the container DIV.

Permalink