การลง คลิป youtube ใน blogger แล้วให้เป็น auto resize ดูในมือถือหรือ tablet ขอบของคลิปไม่เกินออกไป

..มี บาง  template ที่เราเอามาใช้กับ blogger  เราจะลงคลิป youtube เราตั้งขนาดคลิปพอดี สำหรับการดูในคอมพิวเตอร์แล้ว แต่พอไปดูในมือถือ หรือ tablet ขนาดไม่ได้สัดส่วน ใหญ่เกินออกมา
..แต่บาง  template พอลง พอดีสำหรับดูในคอมแล้ว ดูที่อื่นก็พอดีนะครับ แล้วแต่การออกแบบ

ถ้า เจอปัญหา ดูใน มือถือและ tablet แล้วขอบเกิน ขนาดกว้างยาวคลิปไม่ resize ให้  ก็ถือว่าเป็นเรื่องสำคัญ เพราะเดี๋ยวนี้ ความสะดวกในการดูเว็บ ดูคลิป ผ่านมือถือ หรือ tablet มีความนิยมมาก
resize-youtube

วิธีแก้ไขคือ เพิ่ม CSS ให้กับ blogger นั้น ไม่ยากครับ อย่าพึ่งตกใจ
code ล่างนี้ คือ code ที่จะต้อง copy แล้วเพิ่มเข้าไป


.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%;
}

วิธีการเพิ่ม css code
login เข้า blogger แล้วเข้าจัดการ blog ที่ต้องการเพิ่ม code css
เข้าที่ แม่แบบ –> กำหนดค่า
เพิ่มcssblogger-1

เมื่อคลิกที่การกำหนดค่าแล้ว …มาเลือกต่อที่ ขั้นสูง
เพิ่มcssblogger-2

เลือกต่อที่ เพิ่ม CSS
เพิ่มcssblogger-3
วาง CSS Code ที่ copy มาแล้ว ลงไปในช่อง แล้วคลิก ใช้กับบล็อก มุมขวาบน เป็นอันเสร็จขั้นตอนการแทรก CSS code
เพิ่มcssblogger-4

แล้วทีนี้ เวลา post แทรก code youtube ให้ใช้ code ตามนี้

<div class="video-container">
<iframe src="http://www.youtube.com/embed/ใส่รหัสวิดีโอคลิป" frameborder="0" width="560" height="315"></iframe>
</div>

รหัสวิดีโอคลิป youtube เช่น https://www.youtube.com/watch?v=ogY8kBxyISo
ก็รหัส ogY8kBxyISo เป็นต้น

ก็เป็นอันเสร็จ ขั้นตอนการลง คลิป youtube ใน blogger ให้เป็น auto resize

ความรู้นี้ได้มาจาก http://avexdesigns.com/responsive-youtube-embed/

blog ที่นำมาเป็นตัวอย่าง http://yphototravel.blogspot.com/