Responsive iframes โดยใช้ CSS กำหนด aspect-ratio ได้

วันนี้ผมจะแสดงให้คุณเห็นว่า คุณสามารถใช้ CSS เพียงไม่กี่บรรทัดเพื่อทำให้ iframe ที่เราต้องการมีขนาดตาม ratio ซึ่งมันจะสามารถย่อขยายตามขนาดหน้าจอได้ด้วย

iframe {
	aspect-ratio: 16 / 9;
	height: 100%;
	width: 100%;
}

แค่นี้ง่ายๆ เราก็ไปกำหนด 16/9 เอาว่าอยากได้ ratio เท่าไร :)

ตัวอย่าง: https://codepen.io/cferdinandi/pen/abLZRMw