3 พฤศจิกายน 2557
หลายท่านคงเคยประสบปัญหาการแทรก Youtube ใน Blogger แล้วขนาดวีดีโอเล็กหรือใหญ่เกินหน้าจอ วันนี้ผมมีวิธีมาแนะนำให้ไปลองกันครับ
วิธีนี้จะทำให้แทรก Youtube ใน Blogger โดยขนาดวีดีโอจะปรับความกว้างอัตโนมัติตามความกว้างของหน้าจอ หรือที่เรียกกันว่า Responsive มีขั้นตอนดังนี้
1.แทรกโค้ดในแม่แบบ
//////////////////////////////
.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%;
}
//////////////////////////////
2.เอาโค้ดแบบฝังมาจาก youtube (สามารถปรับแต่งตัวเลือกตามต้องการ)
3.นำโค้ดที่ได้มาใส่ในโพสท์ของเรา ต้องเปลี่ยนโหมดเขียนเป็น HTML ก่อน โดยใส่โค้ดคลุม iframe ของ youtube ที่ได้มา
//////////////////////////////
<div class="video-container">***</div>
//////////////////////////////
เช่น <div class="video-container"><iframe 853="" allowfullscreen="" frameborder="0" height="480" src="//www.youtube.com/embed/dhfNErssjCI?rel=0" width="853"></iframe></div>
สลับเป็นโหมดเขียนแล้วลองปรับขนาดหน้าต่างเบราเซอร์ไปมาดูว่าหน้าจอหดเข้าออกแล้วหรือไม่ ถ้ายังไม่ได้น่าจะเป็นปัญหาตรงการวางโค้ดในแม่แบบ ลองวางในตำแหน่งอื่นๆดู โชคดีครับ Good luck.
อันนี้แบบเดิมไม่ปรับความกว้างอัตโนมัติ
ใช้โค้ดจาก youtube เดียวกันกับด้านบน
และยังนำไปใช้กับ google maps ได้ด้วย
หลายท่านคงเคยประสบปัญหาการแทรก Youtube ใน Blogger แล้วขนาดวีดีโอเล็กหรือใหญ่เกินหน้าจอ วันนี้ผมมีวิธีมาแนะนำให้ไปลองกันครับ
วิธีนี้จะทำให้แทรก Youtube ใน Blogger โดยขนาดวีดีโอจะปรับความกว้างอัตโนมัติตามความกว้างของหน้าจอ หรือที่เรียกกันว่า Responsive มีขั้นตอนดังนี้
1.แทรกโค้ดในแม่แบบ
//////////////////////////////
.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%;
}
//////////////////////////////
2.เอาโค้ดแบบฝังมาจาก youtube (สามารถปรับแต่งตัวเลือกตามต้องการ)
3.นำโค้ดที่ได้มาใส่ในโพสท์ของเรา ต้องเปลี่ยนโหมดเขียนเป็น HTML ก่อน โดยใส่โค้ดคลุม iframe ของ youtube ที่ได้มา
//////////////////////////////
<div class="video-container">***</div>
//////////////////////////////
เช่น <div class="video-container"><iframe 853="" allowfullscreen="" frameborder="0" height="480" src="//www.youtube.com/embed/dhfNErssjCI?rel=0" width="853"></iframe></div>
สลับเป็นโหมดเขียนแล้วลองปรับขนาดหน้าต่างเบราเซอร์ไปมาดูว่าหน้าจอหดเข้าออกแล้วหรือไม่ ถ้ายังไม่ได้น่าจะเป็นปัญหาตรงการวางโค้ดในแม่แบบ ลองวางในตำแหน่งอื่นๆดู โชคดีครับ Good luck.
อันนี้แบบเดิมไม่ปรับความกว้างอัตโนมัติ
ใช้โค้ดจาก youtube เดียวกันกับด้านบน
และยังนำไปใช้กับ google maps ได้ด้วย
