ตัวสร้างโค้ด iframe Embed
สร้างโค้ด iframe แบบ responsive สำหรับ YouTube, Vimeo, Google Maps หรือ URL ใดก็ได้ พร้อม lazy loading, sandbox, title และ referrerpolicy พร้อมพรีวิวสด
Loading tool...
ตัวสร้างโค้ด iframe Embed คืออะไร?
Iframe Embed Code Generator เป็นเครื่องมือออนไลน์ฟรีที่สร้างโค้ด iframe สำหรับฝังวิดีโอ YouTube, player ของ Vimeo, Google Maps หรือ URL อื่นใดก็ได้ แปลงลิงก์แชร์ทั่วไปเป็น embed URL ที่ถูกต้อง ห่อ frame ด้วย container แบบ responsive ที่คงสัดส่วนภาพ และใส่ attribute ด้านประสิทธิภาพและความปลอดภัย เช่น lazy loading, sandbox และ referrer policy พร้อมพรีวิวสด ทำงานในเบราว์เซอร์ทั้งหมด
ประโยชน์หลัก
- Embed แบบ responsive ที่แสดงผลดีทั้งมือถือและเดสก์ท็อป
- แปลงลิงก์ YouTube, Vimeo และ Google Maps เป็น embed URL อัตโนมัติ
- หน้าเว็บเร็วขึ้นด้วย lazy loading
- ปลอดภัยยิ่งขึ้นด้วยตัวเลือก sandbox และ referrer policy
- พรีวิวสดและคัดลอกโค้ดได้ทันที
กรณีการใช้งาน
- •ฝังวิดีโอในบล็อกและเอกสารประกอบการใช้งาน
- •ใส่แผนที่ตำแหน่งร้านในหน้าติดต่อ
- •วาง dashboard หรือ widget จากภายนอกในพอร์ทัล
- •สร้าง embed ที่ปลอดภัยสำหรับเว็บไคลเอ็นต์ด้วยสิทธิ์ sandbox
วิธีสร้างโค้ด iframe Embed
- วาง URL ของคุณ: วางลิงก์ YouTube, Vimeo, Google Maps หรือหน้าเว็บอื่น ๆ ระบบจะตรวจจับ provider อัตโนมัติและแปลงเป็น embed URL ที่ถูกต้อง
- เลือกขนาดและสัดส่วนภาพ: เปิด wrapper แบบ responsive ไว้แล้วเลือกสัดส่วน 16:9, 4:3, 1:1 หรือ 21:9 หรือจะปิดแล้วกรอกความกว้าง-สูงเป็นพิกเซลเองก็ได้
- ปรับตัวเลือกการฝัง: เลือกโหมด lazy หรือ eager loading กำหนด referrer policy ใส่ title สำหรับ accessibility เปิด fullscreen และเปิดสิทธิ์ sandbox ได้ตามต้องการ
- พรีวิวและคัดลอกโค้ด: ตรวจสอบพรีวิวสด แล้วกดคัดลอก นำโค้ด HTML ที่ได้ไปวางในเว็บไซต์ บล็อก หรือ CMS ของคุณ
คุณสมบัติหลัก
- ตรวจจับลิงก์ YouTube, Vimeo และ Google Maps อัตโนมัติ แล้วสร้าง embed URL ที่ถูกต้อง
- Wrapper แบบ responsive พร้อมสัดส่วน 16:9, 4:3, 1:1 และ 21:9
- เลือกโหมด lazy หรือ eager loading ได้
- สวิตช์สิทธิ์ sandbox พร้อมคำเตือนเมื่อตั้งค่าร่วมกันเสี่ยง
- ตัวเลือก referrer policy และ title สำหรับ accessibility
- พรีวิวสดและคัดลอกโค้ดได้ในคลิกเดียว ทำงานในเบราว์เซอร์ 100%
คำถามที่พบบ่อย
โค้ด iframe embed คืออะไร?
iframe (inline frame) คือ element ของ HTML ที่ใช้ฝังหน้าเว็บอื่นไว้ในหน้าของคุณ YouTube, Vimeo และ Google Maps มี player สำหรับฝังที่วางบนเว็บได้ด้วยแท็ก iframe เครื่องมือนี้ช่วยสร้างแท็กนั้นพร้อม attribute ที่ถูกต้องให้
ทำไมหน้าที่ฝังถึงว่างในพรีวิว?
บางเว็บไซต์ส่ง header X-Frame-Options หรือ frame-ancestors ใน Content-Security-Policy ที่ห้ามการฝังนอก player ของตัวเอง YouTube, Vimeo และ Google Maps อนุญาตให้ฝังได้ แต่หน้าค้นหา Google หรือเว็บทั่วไปส่วนใหญ่ห้าม ให้ใช้ embed URL ของ provider สำหรับกรณีเหล่านั้น
sandbox attribute ทำอะไร?
sandbox จำกัดสิทธิ์ของเนื้อหาที่ฝัง เช่น การรันสคริปต์ ส่งฟอร์ม เปิด popup หรือเข้าถึง origin ของหน้าคุณ โดยแต่ละสิทธิ์ต้องเปิดให้เอง ระวังการใช้ allow-scripts ร่วมกับ allow-same-origin กับเนื้อหาที่ไม่น่าเชื่อถือ เพราะชุดนี้ทำให้ frame ถอดข้อจำกัดของตัวเองออกได้
wrapper แบบ responsive ทำงานอย่างไร?
เครื่องมือห่อ iframe ด้วย div ที่จองพื้นที่แนวตั้งด้วย padding-bottom เป็นเปอร์เซ็นต์ตามสัดส่วนภาพ แล้ววาง iframe แบบ absolute ทับด้วยความกว้าง-สูง 100% ผลคือ frame ย่อ-ขยายตามความกว้างของคอนเทนเนอร์โดยคงสัดส่วนบนทุกขนาดหน้าจอ