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

การแสดงผลวีดีโอของ 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 ได้เลย ตัวอย่างตามด้านล่าง

เว็บไซต์ทำ QR Code ชำระเงิน บัญชีพร้อมเพย์... Prompt Pay (พร้อมต์เพย์) คือ รูปแบบการชำระเงินแบบใหม่ ที่ทำให้เราสามารถชำระเงิน หรือ รับโอนเงิน ผ่านหมายเลขโทรศัพท์ หรือ เลขบัตรประชาชน ที่ลงทะเบ...
6 สุดยอด WordPress Plugins สำหรับ SEO... เวิร์ดเพรส คือ เครื่องมือสำหรับทำเว็บไซต์สำเร็จรูปที่ได้รับความนิยม และทรงประสิทธิภาพมาก ๆ ทุกคนสามารถดาวน์โหลดและติดตั้ง จัดการเนื้อหาบนเว็บไซต์...
วิธีแก้ Merge Conflict ใน Git ในขั้นตอนของการพัฒนา โปรแกรมเมอร์แต่ละคนอาจจะแยก Branch ออกไปพัฒนาแต่ละฟีเจอร์ของโปรเจค แต่อาจจะมีบ้างที่มีการแก้ไขในส่วนของไฟล์ที่ใช้ร่วมกัน เช่...
Git คืออะไร การใช้งาน Git ฉบับผู้เริ่มต้น... Git คือ Version Control ที่ถูกพัฒนาขึ้นมาเพื่อใช้ในกระบวนการพัฒนาซอฟต์แวร์ แปลให้เข้าใจแบบง่าย ๆ คือ ระบบที่ถูกพัฒนาขึ้นมาเพื่อใช้สำหรับการติดตาม...

By codebee

- Programmer & Writer