ไปเจอเว็บที่แนะนำการแทรก video แบบรองรับ responsive design
หรือการปรับขนาดตามขนาดหน้าจอที่แสดงผล สามารถเข้าไปดูรายละเอียด
ตัวอย่างโค้ดที่ใช้งาน
เป็นการสมมติขนาดหน้าจอต่างๆ โดยที่โค้ดการเรียกใช้งาน
video เหมือนเดิม แต่ขนาดของ video มีการปรับตามความกว้างของขนาด div
ที่ครอบไว้อีกที
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <!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> |
