วิธีการ - Iframe ที่ตอบสนอง
เรียนรู้วิธีสร้าง iframes ที่ตอบสนองด้วย CSS
Iframes ที่ตอบสนอง
สร้าง iframe ที่จะคงอัตราส่วนกว้างยาว (4:3, 16:9 ฯลฯ) เมื่อปรับขนาด:
อัตราส่วนภาพคืออะไร?
อัตราส่วนกว้างยาวขององค์ประกอบอธิบายความสัมพันธ์ตามสัดส่วนระหว่างความกว้างและความสูงขององค์ประกอบ อัตราส่วนกว้างยาวของวิดีโอสองแบบคือ 4:3 (รูปแบบวิดีโอสากลของศตวรรษที่ 20) และ 16:9 (อัตราส่วนสากลสำหรับโทรทัศน์ HD และโทรทัศน์ระบบดิจิทัลของยุโรป และสำหรับวิดีโอ YouTube)
วิธีการ - Iframes ที่ตอบสนอง
ขั้นตอนที่ 1) เพิ่ม HTML:
ใช้องค์ประกอบคอนเทนเนอร์ เช่น <div> และเพิ่ม iframe ภายใน:
ตัวอย่าง
<div class="container">
<iframe
class="responsive-iframe"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
ขั้นตอนที่ 2) เพิ่ม CSS:
เพิ่มค่าเปอร์เซ็นต์padding-top
เพื่อรักษาอัตราส่วนกว้างยาวของคอนเทนเนอร์ DIV ตัวอย่างต่อไปนี้จะสร้างอัตราส่วนภาพ 16:9 ซึ่งเป็นอัตราส่วนเริ่มต้นของวิดีโอ YouTube
ตัวอย่าง 16:9 อัตราส่วนภาพ
.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%;
}
อัตราส่วนภาพอื่นๆ:
ตัวอย่าง 4:3 อัตราส่วนภาพ
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio */
}
ตัวอย่าง 3:2 อัตราส่วนภาพ
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio */
}
ตัวอย่าง 8:5 อัตราส่วนภาพ
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio */
}
ตัวอย่าง 1:1 อัตราส่วนภาพ (ความสูงและความกว้างเท่ากันเสมอ)
.container {
padding-top: 100%; /*
1:1 Aspect
Ratio */
}