ไปเจอเว็บที่แนะนำการแทรก video แบบรองรับ responsive design
หรือการปรับขนาดตามขนาดหน้าจอที่แสดงผล สามารถเข้าไปดูรายละเอียด
ตัวอย่างโค้ดที่ใช้งาน
เป็นการสมมติขนาดหน้าจอต่างๆ โดยที่โค้ดการเรียกใช้งาน
video เหมือนเดิม แต่ขนาดของ video มีการปรับตามความกว้างของขนาด div
ที่ครอบไว้อีกที
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div style="margin:auto;width:800px;position:relative;">
<div style="position:relative;width:250px;">
<div class="video-container">
<iframe width="680" height="453" src="//www.youtube.com/embed/QCRaVYPFtO0?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<br> <br>
<div style="position:relative;width:300px;">
<div class="video-container">
<iframe width="680" height="453" src="//www.youtube.com/embed/QCRaVYPFtO0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<br> <br>
<div style="position:relative;width:500px;">
<div class="video-container">
<iframe width="680" height="453" src="//www.youtube.com/embed/QCRaVYPFtO0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<br> <br>
<div style="position:relative;width:700px;">
<div class="video-container">
<iframe width="680" height="453" src="//www.youtube.com/embed/QCRaVYPFtO0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
</html>
