ทำให้เนื้อหาแบบฝังทั้งหมดตอบสนองด้วย Reframe.js

ส่วนที่ยากที่สุดเกี่ยวกับ การฝังวิดีโอ ได้รับความกว้างและความสูงที่ถูกต้อง ตัวเลขเหล่านี้ กำหนดอัตราส่วนภาพ และเมื่อพวกเขาปิดคุณจะ รับเครื่องเล่นวิดีโอที่ไม่คม.

นี่คือ จริงสำหรับองค์ประกอบที่ฝังตัวทั้งหมด เช่น iframes และวิดเจ็ตสื่อสังคมออนไลน์ และสิ่งเหล่านี้อาจยิ่งซับซ้อนมากขึ้นด้วยการออกแบบที่ตอบสนองได้เพราะปกติแล้ว องค์ประกอบที่ไม่ตอบสนอง.

แต่ด้วย Reframe.js, คุณสามารถทำได้ องค์ประกอบใด ๆ ที่ตอบสนองต่ออัตราส่วนภาพใด ๆ.

นี่อาจเป็นหนึ่งในปลั๊กอิน JS ที่ง่ายและมีค่ามากที่สุดบนเว็บ มันเป็นจริง สร้างโดย Dollar Shave Club ซึ่งมีหน้า GitHub ของตัวเองอย่างน่าประหลาดใจ.

กรอบคือ หนึ่งในปลั๊กอินฟรีของพวกเขา สร้างขึ้นสำหรับนักพัฒนาที่ต้องการวิธีที่ง่ายกว่า การจัดการเนื้อหาฝังตัวที่ตอบสนองต่อ.

ผู้ร้ายที่ชัดเจนคือวิดีโอที่ฝังจากเว็บไซต์เช่น YouTube และ Vimeo มันเป็นเรื่องฉาวโฉ่ ยากที่จะทำให้องค์ประกอบเหล่านี้ตอบสนอง โดยไม่ต้องแฮ็ก CSS.

ด้วย Reframe.js คุณก็แค่ เลือก องค์ประกอบใดก็ตามที่คุณต้องการกำหนดเป้าหมายและ ใส่กรอบใหม่ ใช้ วางใหม่ () ฟังก์ชัน.

เริ่มต้นด้วยการเพิ่มปลั๊กอิน Reframe.js ไปยังหน้าเว็บของคุณ คุณสามารถ ดาวน์โหลดสำเนา จาก GitHub และเป็นเพียง 1KB ลดขนาด.

จากนั้นคุณก็แค่ ผ่านฟังก์ชั่นตัวเลือก สำหรับองค์ประกอบใดก็ตามที่คุณต้องการกำหนดใหม่. โหลดหน้า และบูม! คุณควรจะพร้อมทั้งหมด.

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

ดังนั้นคุณ รหัสจาวาสคริปต์ จะมีลักษณะเช่นนี้:

วางใหม่ (วิดีโอ '');

สวยเรียบง่ายใช่มั้ย?

รหัสนี้กำหนดเป้าหมายองค์ประกอบทั้งหมดที่มีคลาส .วีดีโอ และ ทำให้ตอบสนอง. ไม่มีแฮ็คพิเศษไม่มี CSS พิเศษ ได้รับมีอะไรผิดปกติกับการใช้วิธีการ CSS แต่คุณจะต้อง ห่อด้วยตนเอง วิดีโอแบบฝังทั้งหมดพร้อมคลาสพิเศษ.

รีเฟรชเพียง ช่วยคุณในขั้นตอนพิเศษ และนำมาใช้ทั้งหมดด้วย JavaScript ไปยัง ตรวจสอบตัวอย่าง และ ค้นหาตัวอย่างโค้ดพื้นฐาน, ไปที่หน้าแรกของ Reframe.js คุณสามารถ ดาวน์โหลดสำเนาของรหัส ส่งตรงจาก repo GitHub.