สมัยนี้เวลาทำเว็บต้องคิดถึงพวกอุปกรณ์ขนาดหน้าจอต่างๆ เมื่อใส่ video แล้วก็อยากจะให้มันกว้างพอดีกับหน้าจอ ไม่ว่าจะเป็น iPhone, ipad, Note อุปกรณ์พกพามันมีหลายขนาดเหลือเกิน โดยเฉพาะของช่างตัดกระจกอย่าง samsung ที่ทำมือถือออกมาแทบจะทุกขนาด แถมแต่ละเครื่องยังมีแนวตั้ง แนวนอนให้เลือกอีก อีกจะเขียน code ให้ได้ทุกชิ้นยังไงก็ไม่ครบทั้งหมด
ไปเจอบนความดีๆ Responsive Youtube Embed ใช้แค่ css นิดหน่อยก็ตอบโจทย์ได้แล้ว
เปิดหน้าเว็บยูทูปที่เราต้องการใส่ในเว็บ ของผมคือเพลง เพลง ความรักกับรองเท้า
ศิลปิน SIGNATURE สังเกตุด้านบนเว็บจะมี url อยู่ด้านบน ของเพลงนี้คือ http://www.youtube.com/watch?v=FPnewcqkmlc&list=RDFPnewcqkmlc คัดลอกอักษรระหว่าง v= และ & ไปใส่โค้ทตามตัวอย่างด้านล่าง
[sourcecode language=”html”]
<!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>
[/sourcecode]
เสร็จแล้ว มันง่ายมาก ฟังเพลงโปรดของผมไปเพลินๆ นะครับ หวังว่าวันหนึ่งจะได้มีคนมานั่งฟังเพลงนี้ด้วยกัน