บทช่วยสอน การออกแบบเว็บที่ตอบสนอง - วีดีโอ (Video) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ใช้แอตทริบิวต์กว้าง,ตัวอย่าง,การใช้ความกว้างสูงสุดคุณสมบัติ,ตัวอย่าง,เพิ่มหน้าวิดีโอ,ตัวอย่าง,

การออกแบบเว็บที่ตอบสนอง - วีดีโอ (Video)

ใช้แอตทริบิวต์กว้าง

ถ้าแอตทริบิวต์ความกว้างถูกตั้งค่าเป็น 100%, เครื่องเล่นวิดีโอจะถูกปรับโดยอัตโนมัติในสัดส่วนที่ขนาดหน้าจอ:

ตัวอย่าง

วิดีโอ {
ความกว้าง: 100%;
ความสูง: อัตโนมัติ
}

ลอง»

โปรดทราบว่าในตัวอย่างข้างต้น, เครื่องเล่นวิดีโอจะถูกปรับโดยอัตโนมัติในสัดส่วนกับขนาดของหน้าจอและสามารถมีขนาดใหญ่กว่าขนาดเดิม บ่อยขึ้นเราสามารถใช้คุณสมบัติความกว้างสูงสุดแทน


การใช้ความกว้างสูงสุดคุณสมบัติ

ถ้าคุณสมบัติความกว้างสูงสุดถูกตั้งค่าเป็น 100%, เครื่องเล่นวิดีโอจะถูกปรับโดยอัตโนมัติในสัดส่วนที่หน้าจอ แต่ไม่เกินขนาดเดิม:

ตัวอย่าง

วิดีโอ {
ความกว้างสูงสุด: 100%;
ความสูง: อัตโนมัติ
}

ลอง»

เพิ่มหน้าวิดีโอ

เราสามารถเพิ่มวิดีโอในหน้าเว็บ ตัวอย่างและวิดีโอต่อไปนี้จะถูกปรับโดยอัตโนมัติตามภูมิภาคหมกมุ่นอยู่กับขนาดพื้นที่ div div ทั้งหมด:

ตัวอย่าง

วิดีโอ {
ความกว้าง: 100%;
ความสูง: อัตโนมัติ
}

ลอง»
การออกแบบเว็บที่ตอบสนอง - วีดีโอ (Video)
10/30