เครื่องมือสร้างโค้ดฝัง Responsive
เครื่องมือสร้าง Embed Code
เครื่องมือสร้างโค้ดฝัง Responsive (YouTube, Vimeo, Maps, Calendly) | We.Inc
วางลิงก์ YouTube, Vimeo, Google Maps, Calendly, Spotify, Loom หรือ Google Forms เพื่อรับโค้ด iframe ที่ปรับตามจอ โหลดเมื่อจำเป็น และมีชื่อที่เข้าถึงได้ พร้อมตัวอย่างสดและหมายเหตุความเป็นส่วนตัวของแต่ละบริการ
วางลิงก์จากผู้ให้บริการที่รองรับ เลือกอัตราส่วนภาพ และตั้งชื่อให้เนื้อหาที่ฝัง คุณจะได้โค้ด iframe ที่ปรับตามความกว้างทุกหน้าจอ โหลดเมื่อผู้เข้าชมเลื่อนมาใกล้ และมีชื่อสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ ตัวอย่างสดแสดงผลลัพธ์ พร้อมหมายเหตุของแต่ละผู้ให้บริการว่าอาจติดตามอะไรและมีตัวเลือกที่คำนึงถึงความเป็นส่วนตัวหรือไม่ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ไม่มีการส่งสิ่งที่คุณพิมพ์หรืออัปโหลดไปยัง We.Inc หรือบุคคลอื่น
- วางลิงก์: วิดีโอ YouTube หรือ Vimeo, ลิงก์ฝัง Google Maps, หน้าจอง Calendly, เพลงหรือเพลย์ลิสต์ Spotify, วิดีโอ Loom หรือ Google Form
- เครื่องมือจะตรวจผู้ให้บริการและเขียนลิงก์ใหม่เป็นที่อยู่ฝังอย่างเป็นทางการของผู้ให้บริการนั้น ลิงก์ที่ตรวจไม่พบจะถูกปฏิเสธแทนการเดา
- เลือกอัตราส่วนภาพ (16:9 สำหรับวิดีโอ, 4:3, 1:1 หรือกำหนดความสูงคงที่สำหรับหน้าจองและแบบฟอร์ม) แล้วเขียนชื่อที่บอกว่าเนื้อหาฝังนั้นคืออะไร
- เลือกรูปแบบการโหลด ค่าเริ่มต้นเปิดการโหลดแบบ lazy เพื่อไม่ให้เนื้อหาฝังทำให้ส่วนแรกของหน้าเว็บช้า
- ตรวจตัวอย่างสด แล้วคัดลอก HTML หมายเหตุของผู้ให้บริการระบุสิ่งที่ควรแจ้งในประกาศความเป็นส่วนตัวหรือคุกกี้
- ตั้งชื่อ iframe ทุกอันให้บอกเนื้อหา เช่น “แผนที่ร้านเราบน King Street” โปรแกรมอ่านหน้าจอจะอ่านชื่อนี้ให้ฟัง
- ใช้ youtube-nocookie.com สำหรับวิดีโอ YouTube เพื่อไม่ตั้งคุกกี้ YouTube จนกว่าผู้เข้าชมจะกดเล่น
- วางเนื้อหาฝังที่มีขนาดใหญ่ไว้ต่ำกว่าส่วนแรกของหน้า หรือใช้ lazy load เพราะแต่ละรายการโหลดหน้าเว็บทั้งหน้าจากเว็บไซต์อื่น
- วิดเจ็ตจอง แชต และแบบฟอร์มเป็นผลิตภัณฑ์ของผู้ให้บริการ ไม่ใช่เว็บไซต์ของคุณ เงื่อนไขและการจัดการข้อมูลของผู้ให้บริการมีผล
- สำหรับ Google Maps ให้เลือก Share แล้ว Embed a map จากนั้นคัดลอกที่อยู่ใน src ลิงก์ Maps ทั่วไปไม่สามารถฝังได้
คำถามที่พบบ่อย
ทำ iframe ให้ Responsive อย่างไร
ครอบ iframe ด้วยคอนเทนเนอร์ที่กำหนด aspect-ratio (เช่น 16 / 9) และ width: 100% แล้วตั้ง iframe ให้เต็มคอนเทนเนอร์ เว็บไซต์รุ่นเก่าใช้เทคนิค padding-top แต่เบราว์เซอร์ปัจจุบันรองรับ aspect-ratio ทั้งหมด เครื่องมือนี้สร้างรูปแบบสมัยใหม่ให้
รองรับผู้ให้บริการรายใดบ้าง
YouTube (รวม Shorts และลิงก์ youtu.be), Vimeo, ลิงก์ฝัง Google Maps, Calendly, Spotify, Loom และ Google Forms แต่ละบริการมีที่อยู่ฝังที่ระบุไว้ชัดเจน ลิงก์อื่นจะถูกปฏิเสธเพื่อไม่ให้เครื่องมือสร้างโค้ดที่ใช้งานไม่ได้
Lazy loading ทำให้เนื้อหาฝังเสียไหม
ไม่ loading="lazy" สั่งให้เบราว์เซอร์ดึง iframe เมื่ออยู่ใกล้ส่วนที่มองเห็นได้ของหน้า ผู้เข้าชมที่เลื่อนมาถึงจะเห็นโหลดตามปกติ
We.Inc มีบริการจองหรือแชตไหม
ไม่มี Calendly และเครื่องมือคล้ายกันเป็นบริการแยกต่างหากที่คุณสมัครกับผู้ให้บริการโดยตรง เครื่องมือนี้สร้างเฉพาะโค้ดสำหรับแสดงวิดเจ็ตของบริการนั้นบนหน้าเว็บ
ทำไมลิงก์ Google Maps ของฉันใช้ไม่ได้
ลิงก์ maps.google.com และ goo.gl ทั่วไปไม่อนุญาตให้ฝัง เปิดสถานที่ใน Google Maps เลือก Share แล้ว Embed a map จากนั้นวางที่อยู่จากส่วน src ของโค้ดที่แสดง
เนื้อหาฝังมีต้นทุนต่อผู้เข้าชมอย่างไร
- เนื้อหาฝังคือหน้าต่างเล็ก ๆ ที่เปิดหน้าเว็บของบริษัทอื่น โหลดสคริปต์ของบริษัทนั้น อาจตั้งคุกกี้ และเพิ่มน้ำหนักให้หน้าเว็บ ซึ่งมักคุ้มค่าแต่ควรเป็นทางเลือก: ใช้ lazy load กับเนื้อหาฝังที่อยู่ต่ำกว่าส่วนแรก ใช้โหมดเพิ่มความเป็นส่วนตัวเมื่อมี และแจ้งเนื้อหาฝังจากบุคคลที่สามในประกาศความเป็นส่วนตัว
เนื้อหาฝังที่เข้าถึงได้
- โปรแกรมอ่านหน้าจอจะประกาศ iframe ด้วยชื่อของมัน หากไม่มีชื่อ ผู้เข้าชมจะได้ยินแค่ “เฟรม” โดยไม่รู้ว่าเป็นอะไร ตั้งชื่อให้ชัด ใส่ลิงก์ข้อความไปยังเนื้อหาเดียวกันใต้ส่วนฝัง และเพิ่มคำบรรยายวิดีโอ เพื่อให้ทุกคนใช้งานเนื้อหาฝังได้
เริ่มต้นฟรี · ไม่ต้องใช้บัตรเครดิต
Product
Who It's For
Features
Resources
Company
View Sitemap