วิธีใช้-Bootstrap-แสดงผล-Youtube-Video

วิธีใช้ Bootstrap แสดงผล Youtube Video Embed แบบ Responsive

การแสดงผลวีดีโอของ Youtube ในเว็บไซต์นั้น Embed Code ของวีดีโอที่ได้มา เราจะได้มาในรูปแบบของ iframe ซึ่งทำให้จัดการขนาดที่เหมาะสมแต่ละน่าจอค่อนข้างลำบาก

Bootstrap เฟรมเวิร์ค เวอร์ชั่น 3 มีคลาสที่ใช้สำหรับการแสดงผล iframe video ชื่อว่า

และสามารถปรับอัตราส่วนการแสดงผลด้วยคลาสดังต่อไปนี้ ( ซึ่งโดยส่วนใหญ่ขนาดวีดีโอที่แสดงผลมักจะเป็น 16 ต่อ 9 ให้ใช้คลาส embed-responsive-16by9

โดยวิธีใช้งานคือการครอบคลาส embed-responsive embed-responsive-1by1 ไว้บน div เหนือ iframe และใส่คลาสด้านล่างในแท็ก iframe

ขั้นตอนการ Embed Youtube Video

  • เข้าไปที่ Link Youtube ที่เราต้องการจะแสดงผลบนหน้าเว็บไซต์ กดที่ปุ่ม แชร์ และเลือก ฝัง จากนั้น copy code iframe ตัวอย่างดังภาพด้านล่าง
  • นำ iframe code มาวางในระหว่างคลาส embed-responsive และใส่คลาส embed-responsive-item ใน iframe ตัวอย่างตามโค๊ดด้านล่าง
  • เพียงเท่านี้วีดีโอของเราก็จะปรับการแสดงผลตามขนาดหน้าจอ หรือทำงานแบบ Responsive แล้ว กรณีที่เราอยากจัด column การแสดงผล หรือต้องการแสดงผล embed video หลายตัว ก็สามารถ จัด row column ได้เลย ตัวอย่างตามด้านล่าง

กระทู้ใกล้เคียง

เว็บไซต์ย่อลิงค์ ย่อ url ให้สั้น ดี ๆ ฟรี ไม่มีโฆษ... ก่อนอื่นต้องอธิบายก่อนว่า ทำไมต้องย่อลิงค์ให้สั้นลง สาเหตุที่เราต้องย่อลิงค์ให้สั้นลง มีจุดประสงค์ที่แตกต่างกันไป แต่สาเหตุหลัก ๆ ที่พอจะสรุปได้ ...
5 สาเหตุที่ AppReject ไม่ให้ขึ้น Apps Store ( App... ในการนำ Application ขึ้นออนไลน์บน Apple App Store นั้น นักพัฒนาจำเป็นจะต้องพัฒนาแอปพลิเคชั้นให้ทำงานตามกฏเกณฑ์ของ Store เสียก่อน หรือที่เรียกว่า ...
ติดตั้งใช้งาน Omise ระบบชำระเงินออนไลน์... Omise อ่านว่า โอมิเซะ คือ ระบบชำระเงินออนไลน์ ( Online Payment Gateway ) รองรับช่องทางการชำระเงินที่หลากหลาย บัตรเครดิต / เดบิต  Truemoney W...
วิธีตั้งค่า Email ใน Android ภายใต้โดเมนตัวเอง ( C... เราอาจจะคุ้นเคยกับการใช้บริการอีเมลผ่านผู้ให้บริการเจ้าใหญ่ ๆ อย่าง Gmail, Hotmail, Yahoo หรือ Sanook เป็นต้น แต่เมื่อเราทำเว็บไซต์ และเปิดใช...

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.