ฝังวิดีโอตอบกลับได้อย่างง่ายดายด้วย SuperEmbed.js

เว็บที่ทันสมัยคือ ตอบสนองอย่างเต็มที่ และนักออกแบบมากขึ้นตระหนักถึงสิ่งนี้ทุกวัน แต่มีความท้าทายที่น่ารำคาญเมื่อพูดถึงการออกแบบที่ตอบสนองได้: เนื้อหาที่ฝัง.

ทุกเว็บไซต์วิดีโอจาก YouTube ถึง Vimeo มี รหัสฝังเริ่มต้น จับจ้องไปที่ขนาดที่แน่นอน ซึ่งหมายความว่านักพัฒนาซอฟต์แวร์จำเป็นต้องใช้โซลูชั่นอื่น ๆ สร้างวิดีโอที่ตอบสนองอย่างเต็มที่.

อย่างไรก็ตามแทนที่จะใช้คลาสคอนเทนเนอร์ CSS คุณสามารถใช้ SuperEmbed.js, ไลบรารี JavaScript ฟรีสำหรับ สร้างวิดีโอตอบสนอง.

ปลั๊กอินนี้ แก้ปัญหาสองข้อ ในครั้งเดียว. วิดีโอทั้งหมดที่ฝังจะ ยืดเพื่อเติมภาชนะหลัก, ในขณะที่ยังยืดหยุ่นเพียงพอ ปรับขนาดตามหน้าต่างเบราว์เซอร์.

ส่วนที่ดีที่สุดคือ SuperEmbed.js ไม่ต้องใช้รหัสเพิ่มเติม, เพื่อให้คุณสามารถ ฝังไฟล์ และ ปล่อยให้พวกเขาวิ่ง. ไลบรารี JS นี้ดูแลส่วนที่เหลือโดย การกำหนดเป้าหมายองค์ประกอบฝังตัวจากบางเว็บไซต์.

วิดีโอทั้งหมด รักษาอัตราส่วนเฉพาะของพวกเขา, ดังนั้นคุณไม่จำเป็นต้องกังวลเกี่ยวกับมิติที่สกปรก และ SuperEmbed ทำงานเป็น ไลบรารีวานิลลา JS กับ ไม่มีการพึ่งพา เช่น jQuery.

ตอนนี้ SuperEmbed รองรับการฝังวิดีโอ 15+ รายการ จากเว็บไซต์เช่น YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me และ Archive.org (รวมถึงอีกมากมาย) รายการนี้คือ ยังคงเติบโต, ดังนั้นคาดว่าจะมีการเพิ่มบริการสตรีมมิ่งวิดีโอมากขึ้นเมื่อเวลาผ่านไป.

เพื่อให้เครื่องมือนี้ทำงานได้คุณเพียงแค่ต้อง ดาวน์โหลดไลบรารี่ และ เพิ่มลงในส่วนหัวของเว็บไซต์ของคุณ ชอบมาก:

คุณสามารถดาวน์โหลด คัดลอกอย่างเต็มที่ จาก repo GitHub ซึ่งรวมถึงข้อกำหนดสำหรับ เว็บไซต์วิดีโอที่รองรับ และ การสนับสนุนเบราว์เซอร์ปัจจุบัน.

ส่วนใหญ่แล้ว SuperEmbed รองรับเบราว์เซอร์ที่ทันสมัยทั้งหมด จาก FireFox 3.5+, Chrome 4+ และรุ่นของ Internet Explorer 9 หรือสูงกว่า.

นี่เป็นห้องสมุดที่น่าประทับใจมากเมื่อพิจารณาถึงการรองรับเบราว์เซอร์ทั้งหมด ใช้งานได้ทันทีนอกกรอบ. มันเป็นวิธีที่ง่ายกว่า CSS hacks ถ้าคุณไม่ต้องพึ่งจาวาสคริปต์.

คุณสามารถหา ข้อมูลมากกว่านี้ บน GitHub และคุณสามารถดูได้ วิ่งสด ในซอนี้.