การแสดงผลวีดีโอของ Youtube ในเว็บไซต์นั้น Embed Code ของวีดีโอที่ได้มา เราจะได้มาในรูปแบบของ iframe ซึ่งทำให้จัดการขนาดที่เหมาะสมแต่ละน่าจอค่อนข้างลำบาก
Bootstrap เฟรมเวิร์ค เวอร์ชั่น 3 มีคลาสที่ใช้สำหรับการแสดงผล iframe video ชื่อว่า
|
1 |
embed-responsive |
และสามารถปรับอัตราส่วนการแสดงผลด้วยคลาสดังต่อไปนี้ ( ซึ่งโดยส่วนใหญ่ขนาดวีดีโอที่แสดงผลมักจะเป็น 16 ต่อ 9 ให้ใช้คลาส embed-responsive-16by9
|
1 2 3 4 |
embed-responsive-1by1 embed-responsive-4by3 embed-responsive-16by9 embed-responsive-21by9 |
โดยวิธีใช้งานคือการครอบคลาส embed-responsive embed-responsive-1by1 ไว้บน div เหนือ iframe และใส่คลาสด้านล่างในแท็ก iframe
|
1 |
embed-responsive-item |
ขั้นตอนการ Embed Youtube Video
- เข้าไปที่ Link Youtube ที่เราต้องการจะแสดงผลบนหน้าเว็บไซต์ กดที่ปุ่ม แชร์ และเลือก ฝัง จากนั้น copy code iframe ตัวอย่างดังภาพด้านล่าง
- นำ iframe code มาวางในระหว่างคลาส embed-responsive และใส่คลาส embed-responsive-item ใน iframe ตัวอย่างตามโค๊ดด้านล่าง
|
1 2 3 |
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RFbjt0MFmTk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> |
- เพียงเท่านี้วีดีโอของเราก็จะปรับการแสดงผลตามขนาดหน้าจอ หรือทำงานแบบ Responsive แล้ว กรณีที่เราอยากจัด column การแสดงผล หรือต้องการแสดงผล embed video หลายตัว ก็สามารถ จัด row column ได้เลย ตัวอย่างตามด้านล่าง
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="row"> <div class="col-lg-6 col-md-6 col-xs-6"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/aEyRRYdLISg" allowfullscreen></iframe> </div> </div> <div class="col-lg-6 col-md-6 col-xs-6"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/u6lUN6-dZpM" allowfullscreen></iframe> </div> </div> </div> |
