iframe کدی ساده در زبان HTML است که محتوای یک صفحه دیگر را داخل وبسایت شما نمایش می‌دهد. با این کد می‌توانید ویدیو، نقشه یا فرم را بدون ساختن دوباره، کنار مطالب خودتان نشان دهید. بنابراین اگر دنبال راهی ساده برای نمایش فیلم‌های شرکت خود هستید، این کد گزینه‌ای مناسب است.این راهنما برای کسانی نوشته شده که نمی‌دانند چطور محتوای تصویری خودشان را در سایت قرار دهند. در ادامه می‌خوانید iframe چیست، چگونه کار می‌کند و چرا این‌قدر رایج است. سپس مراحل قرار دادن ویدیو در سایت را قدم به قدم می‌بینید و با محدودیت‌ها و نکات امنیتی آن آشنا می‌شوید.
نام iframe کوتاه‌شده عبارت inline frame است و در فارسی به آن «قاب درون‌خطی» می‌گویند. برخی افراد آن را «آیفریم» می‌نویسند، اما هر دو یک چیز را می‌رسانند. Iframe مثل پنجره‌ای در دیوار عمل می‌کند: از آن می‌توانید محتوای صفحه‌ای دیگر را ببینید، در حالی که طراحی سایت شما تغییری نمی‌کند. شاید ندانید، اما هر روز با آن سروکار دارید. ویدیوهای داخل مقاله‌ها، نقشه گوگل در صفحه تماس و تقویم رزرو نوبت معمولاً با همین روش نمایش داده می‌شوند.
کد iframe در ساده‌ترین حالت فقط یک خط است و هر بخش آن وظیفه مشخصی دارد. ویژگی src آدرس محتوایی را مشخص می‌کند که باید نمایش داده شود. دو گزینه width و height عرض و ارتفاع قاب را به پیکسل تعیین می‌کنند. عبارت title توضیح کوتاهی از محتوای قاب می‌دهد و allowfullscreen اجازه تماشا در حالت تمام‌صفحه را فراهم می‌کند. در نهایت loading با مقدار lazy باعث می‌شود قاب فقط هنگام رسیدن کاربر به آن بارگذاری شود.وقتی بازدیدکننده صفحه را باز می‌کند، مرورگر ابتدا مطالب شما را بارگذاری می‌کند. سپس به تگ iframe می‌رسد و آدرس src را از سرور دیگری درخواست می‌کند. نتیجه داخل قاب نمایش داده می‌شود و مستقل از بقیه مطالب کار می‌کند. استایل و اسکریپت آن با ظاهر وبسایت شما قاطی نمی‌شود و ویدیو بدون خروج کاربر پخش می‌شود.
<iframe data-lazyloaded="1" src="about:blank" data-src="https://example.com/video/123" width="640" height="360" title="معرفی خدمات شرکت" allowfullscreen loading="lazy"></iframe><noscript><iframe src="https://example.com/video/123" width="640" height="360" title="معرفی خدمات شرکت" allowfullscreen loading="lazy"></iframe></noscript>
مهم‌ترین دلیل، صرفه‌جویی در منابع هاست است. فایل ویدیو حجم زیادی دارد و نگهداری آن روی سرور خودتان فضا و ترافیک زیادی مصرف می‌کند. با ای فریم، ویدیو روی سرور تخصصی می‌ماند و سایت شما فقط نمایش آن را بر عهده دارد. همین منطق برای نقشه، فرم تماس و تقویم رزرو هم کار می‌کند، چون این ابزارها را سرویس‌های دیگر می‌سازند. شما فقط کدشان را در صفحه می‌گذارید و سایتی سبک‌تر با امکانات بیشتر به دست می‌آورید.دلیل دوم، جداسازی و به‌روز ماندن محتواست. کد هر منبع داخل قاب خودش اجرا می‌شود، بنابراین مشکل احتمالی آن به ساختار اصلی سایت نمی‌رسد. اگر صاحب محتوا آن را ویرایش کند، نسخه جدید بدون دخالت شما نمایش داده می‌شود.
ابتدا ویدیو را روی یک پلتفرم ویدیو یا سرور استریم مانند سرویس میزبانی ویدیو امید بارگذاری کنید. این سرویس فرمت، حجم و کیفیت پخش را برایتان مدیریت می‌کند. پلتفرم‌های ویدیوی درخواستی، که به اختصار VOD نامیده می‌شوند، برای همین کار ساخته شده‌اند. پس از بارگذاری، بیشتر پلتفرم‌ها گزینه اشتراک‌گذاری یا Embed دارند. با انتخاب آن، کد iframe آماده نمایش داده می‌شود و فقط باید آن را کپی کنید.در مرحله بعد، کد را در صفحه مورد نظر بچسبانید. در وردپرس، بلوک HTML سفارشی را اضافه کنید و کد را داخل آن بگذارید. در سیستم‌های دیگر، ویرایشگر را روی حالت HTML ببرید. سپس مطلب را ذخیره کنید و پیش‌نمایش بگیرید تا مطمئن شوید پخش‌کننده درست دیده می‌شود.اگر عرض ثابت تعیین کرده باشید، قاب ممکن است روی گوشی از کادر بیرون بزند. برای جلوگیری از این مشکل، عرض را صددرصد و نسبت تصویر را شانزده به نه قرار دهید. قاب با هر اندازه نمایشگر هماهنگ می‌شود و کیفیت نمایش حفظ می‌ماند.
<iframe data-lazyloaded="1" src="about:blank" data-src="https://example.com/video/123" title="معرفی خدمات شرکت" style="width:100%; aspect-ratio:16/9; border:0;" allowfullscreen></iframe><noscript><iframe src="https://example.com/video/123" title="معرفی خدمات شرکت" style="width:100%; aspect-ratio:16/9; border:0;" allowfullscreen></iframe></noscript>
iframe نقاط ضعفی هم دارد. هر قاب یک درخواست جداگانه به سرور دیگر می‌فرستد، بنابراین چند پخش‌کننده سنگین در یک صفحه سرعت بارگذاری را کم می‌کند. استفاده از loading با مقدار lazy این مشکل را کاهش می‌دهد. از نظر امنیتی، فقط محتوای منابع معتبر را در سایت بگذارید. ویژگی sandbox هم دسترسی قاب را محدود می‌کند و برای محتوای کمتر شناخته‌شده مفید است.بعضی سایت‌ها اجازه نمایش خود را در قاب نمی‌دهند و به‌جای محتوا، کادر خالی یا پیام خطا نشان می‌دهند. در این حالت از کد رسمی Embed همان سرویس استفاده کنید. نکته آخر مربوط به سئو است. موتورهای جستجو معمولاً محتوای داخل قاب را به صفحه منبع نسبت می‌دهند، پس مطالب مهم را در متن اصلی بنویسید و فقط ویدیو را در قاب بگذارید.نکته جانبیهمیشه برای iframe یک عنوان کوتاه و دقیق بنویسید. ویژگی title به نرم‌افزارهای صفحه‌خوان کمک می‌کند بفهمند قاب چه محتوایی دارد. موتورهای جستجو و دستیارهای هوش مصنوعی هم با کمک آن، ساختار صفحه را بهتر درک می‌کنند. عنوانی مثل «معرفی خدمات پخش زنده» از عنوان کلی «ویدیو» مفیدتر است.
Iframe راهی ساده برای نمایش محتوای بیرونی در وبسایت است. با آن ویدیو را بدون مصرف فضای هاست نمایش می‌دهید، کد را از پلتفرم کپی می‌کنید و در صفحه می‌چسبانید. برای موبایل عرض صددرصد تعیین کنید، منابع معتبر انتخاب کنید و برای هر قاب عنوان بنویسید.اگر می‌خواهید ویدیوهای خودتان را به شکلی حرفه‌ای در وبسایت پخش کنید، سرویس VOD امید تکنولوژی این کار را ساده می‌کند. برای آشنایی بیشتر، صفحه VOD را ببینید.