اگر می‌خواهید ویدیوهای خود را در هر بخشی از وبسایت‌تان نمایش دهید، ساده‌ترین و مطمئن‌ترین راه استفاده از iframe است. با این روش می‌توانید ویدیوهایی که روی یوتیوب، آپارات یا هر سرویس VOD دیگری میزبانی شده‌اند را مستقیم در صفحات سایت خود جای دهید. نیازی به آپلود فایل‌های سنگین روی هاست خودتان نیست و کنترل کامل روی محل و شکل نمایش ویدیو دارید. در ادامه‌ی این مطلب، هم چالش اصلی این کار را توضیح می‌دهیم و هم مرحله به مرحله نشان می‌دهیم چطور آن را در هر نوع وبسایتی پیاده کنید.
فرض کنید کسب‌وکار شما ده‌ها یا حتی صدها ویدیو تولید کرده است. بخشی از این ویدیوها روی یوتیوب آپلود شده‌اند، بخشی روی آپارات و بخشی دیگر در یک سرویس VOD اختصاصی مثل سرویس پخش امید ذخیره شده‌اند. حالا می‌خواهید همه‌ی این ویدیوها را در وبسایت خودتان نمایش دهید، آن هم با ظاهری یکسان و قابل مدیریت.
چالش اینجاست که دانلود و آپلود مستقیم این حجم از فایل‌ها روی هاست، هم فضای زیادی مصرف می‌کند و هم سرعت سایت را پایین می‌آورد. علاوه بر این، پخش مستقیم فایل ویدیو از سرور شما معمولاً بهینه نیست و کیفیت پخش برای کاربران مختلف تضمین نمی‌شود.
راه‌حل این مشکل ساده است. به جای انتقال فایل، فقط باید ویدیو را از همان سرویسی که در آن میزبانی شده، به وبسایت خود متصل کنید. این کار دقیقاً همان کاری است که iframe انجام می‌دهد.
iframe یک قطعه کد HTML است که به شما اجازه می‌دهد محتوای یک صفحه‌ی دیگر را داخل صفحه‌ی خودتان نمایش دهید. وقتی از یوتیوب یا آپارات کد iframe یک ویدیو را می‌گیرید، در واقع یک پنجره‌ی کوچک باز می‌کنید که ویدیو مستقیم از سرور همان سرویس، پخش می‌شود.
مزیت اصلی این روش این است که پخش ویدیو، پهنای باند و کیفیت تصویر بجای اینکه روی وبسایت شما هاست شود، روی سرور سرویس میزبان مدیریت خواهد شد. همین موضوع باعث می‌شود لود بر روی صفحه کمتر شده و سرعت سایت حفظ می‌شود. به همین شکل، نیازی به فضای ذخیره‌سازی اضافی نیز نخواهید داشت.
نکته‌ی مهم: تفاوت اصلی بین لینک مستقیم فایل ویدیو و iframe در همین جاست. اگر لینک مستقیم فایل را در سایت بگذارید، مرورگر کاربر باید کل فایل را از سرور شما دانلود کند که هم کند است و هم پرهزینه. اما با iframe، فقط یک پخش‌کننده نمایش داده می‌شود و بار اصلی روی سرویس میزبان است.
یوتیوب:
روی ویدیوی مورد نظر کلیک راست کنید و گزینه‌ی «کپی کد جاسازی» یا Copy embed code را انتخاب کنید. اگر این گزینه را ندیدید، از دکمه‌ی اشتراک‌گذاری زیر ویدیو استفاده کنید و در بخش Embed کد iframe را کپی کنید.
آپارات:
زیر هر ویدیوی آپارات گزینه‌ی «اشتراک‌گذاری» وجود دارد. با کلیک روی آن، بخش «کد جاسازی» کد iframe مربوط به همان ویدیو را در اختیارتان می‌گذارد.
سرویس‌های VOD و پخش زنده:
سرویس‌های VOD اختصاصی و پلتفرم‌های پخش زنده، مثل سرویس میزبانی ویدیو امید، معمولاً یک پنل مدیریت دارند که در آن می‌توانید برای هر ویدیو یا کانال پخش زنده، کد iframe اختصاصی دریافت کنید. این کد را از پنل کپی کرده و مستقیم در صفحه‌ی سایت خود جای می‌دهید.
استفاده از iframe با کد HTML خام:
اگر وبسایت شما با کدنویسی مستقیم ساخته شده است، کافی است کد iframe را در فایل HTML صفحه مورد نظر جای‌گذاری کنید. یک نمونه‌ی ساده به این شکل است:
<iframe data-lazyloaded="1" src="about:blank" data-src="آدرس-ویدیو" width="640" height="360" frameborder="0" allowfullscreen></iframe><noscript><iframe src="آدرس-ویدیو" width="640" height="360" frameborder="0" allowfullscreen></iframe></noscript>
می‌توانید مقدار width و height را متناسب با طراحی صفحه‌ی خود تغییر دهید. اضافه کردن ویژگی allowfullscreen به کاربران اجازه می‌دهد ویدیو را در حالت تمام‌صفحه تماشا کنند.
افزودن iframe در وردپرس:
در وردپرس، ساده‌ترین راه استفاده از بلاک Custom HTML است. از داخل ویرایشگر، یک بلاک جدید اضافه کنید، نوع آن را Custom HTML انتخاب کنید و کد iframe را داخل آن جای‌گذاری کنید.
اگر از ویرایشگر کلاسیک وردپرس استفاده می‌کنید، کافی است به تب «متن» یا Text سوییچ کنید و کد را مستقیم در همان بخش قرار دهید. بسیاری از قالب‌های وردپرس همچنین شورت‌کد اختصاصی برای نمایش ویدیو دارند که در مستندات قالب قابل بررسی است.
یکی از مشکلات رایج iframe این است که در حالت پیش‌فرض، اندازه‌ی ثابتی دارد و در موبایل به درستی نمایش داده نمی‌شود. برای حل این مشکل می‌توانید iframe را داخل یک ظرف (container) با نسبت ابعاد ثابت قرار دهید:
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
با این روش، ویدیو در همه‌ی سایزهای صفحه‌نمایش به درستی و بدون کشیدگی نمایش داده می‌شود.
برای نمایش پخش زنده با iframe، فرآیند تقریباً مشابه ویدیوهای ضبط‌شده است. تنها تفاوت این است که آدرس داخل iframe باید به کانال پخش زنده متصل باشد، نه یک ویدیوی مشخص. بیشتر سرویس‌های پخش زنده، از جمله سرویس پخش امید، یک لینک ثابت برای این منظور در اختیار شما قرار می‌دهند که همیشه به آخرین پخش زنده‌ی فعال اشاره می‌کند.
استفاده از iframe راه‌حلی ساده، سریع و کم‌هزینه برای نمایش ویدیوهای شما در هر بخش از وبسایت است. چه ویدیوهایتان روی یوتیوب باشد، چه آپارات یا یک سرویس VOD اختصاصی، فقط کافی است کد جاسازی را دریافت کرده و در صفحه‌ی مورد نظر قرار دهید. این روش هم فضای هاست شما را حفظ می‌کند و هم تجربه‌ی پخش بهتری برای کاربران فراهم می‌آورد.
اگر برای مدیریت چند ده یا چند صد ویدیو یا پخش زنده به یک زیرساخت حرفه‌ای نیاز دارید، تیم فنی امید آماده است راهکار مناسب کسب‌وکار شما را طراحی کند.
جهت دریافت مشاوره رایگان، با ما در تماس باشید