สมัยนี้เวลาทำเว็บต้องคิดถึงพวกอุปกรณ์ขนาดหน้าจอต่าง ๆ เมื่อใส่ video แล้วก็อยากจะให้มันกว้างพอดีกับหน้าจอ ไม่ว่าจะเป็น iPhone, ipad, Note อุปกรณ์พกพามันมีหลายขนาดเหลือเกิน โดยเฉพาะของช่างตัดกระจกอย่าง samsung ที่ทำมือถือออกมาแทบจะทุกขนาด แถมแต่ละเครื่องยังมีแนวตั้ง แนวนอนให้เลือกอีก อีกจะเขียน code ให้ได้ทุกชิ้นยังไงก็ไม่ครบทั้งหมด
ไปเจอบนความดี ๆ Responsive Youtube Embed ใช้แค่ css นิดหน่อยก็ตอบโจทย์ได้แล้ว
เปิดหน้าเว็บยูทูปที่เราต้องการใส่ในเว็บ ของผมคือเพลง เพลง ความรักกับรองเท้า
ศิลปิน SIGNATURE สังเกตด้านบนเว็บจะมี url อยู่ด้านบน ของเพลงนี้คือ http://www.youtube.com/watch?v=FPnewcqkmlc&list=RDFPnewcqkmlc คัดลอกอักษรระหว่าง v= และ & ไปใส่โค้ทตามตัวอย่างด้านล่าง
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Youtube Embed</title>
<style>
.video-container {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
}
.video-container embed, .video-container iframe, .video-container object {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="video-container">
<iframe src="http://www.youtube.com/embed/FPnewcqkmlc" frameborder="0" width="560" height="315"></iframe>
</div>
</body>
</html>
เสร็จแล้ว มันง่ายมาก ฟังเพลงโปรดของผมไปเพลิน ๆ นะครับ หวังว่าวันหนึ่งจะได้มีคนมานั่งฟังเพลงนี้ด้วยกัน