یوتیوب در HTML
جلسات audio و video به شما یاد دادند فایل رسانه را خودتان زیر پوشههایی مثل media/ میزبانی کنید. YouTube فرق دارد: استریم آنها را روی سرور خودتان دانلود نمیکنید و عنصر محلی video را به صفحهٔ تماشا وصل نمیکنید. با iframe و قطعهکدی که YouTube میدهد پخشکنندهٔ آنها را جاسازی میکنید. صفحهٔ شما نسبتاً سبک میماند؛ ظاهر سنگین پخشکننده و دادهٔ ویدیو هنگام بازدید با شبکه از سرورهای YouTube بار میشود.
جاسازی یعنی چه؟
جاسازی صفحهٔ تعاملی سایت دیگر (اینجا یک پخشکننده) را داخل یک قاب مستطیل روی صفحهٔ شما میگذارد. بازدیدکننده هنوز عنوانها، پاراگرافها و ناوبری شما را دور آن میبیند، اما کنترلها، برندینگ و استریم از YouTube میآید. به همین دلیل نشانهگذاری شبیه iframe با src به youtube.com/embed/... است، نه مثل video محلی با src="media/clip.mp4". ذهنی جدا کنید: «من فایل را میزبانی میکنم» در برابر «من پخشکنندهٔ دیگران را قاب میکنم.»
پاسخ مستقیم
در YouTube ویدیو را باز کنید → Share → Embed → قطعهٔ <iframe …> را در body صفحهٔ HTML بچسبانید. width و height معقول بگذارید. src همان URL جاسازی YouTube برای آن ویدیو است. دیالوگ رسمی را ترجیح دهید تا مجوزها، شکل URL و ویژگیهای پیشنهادی درست بمانند، نه حدس از لینک چت.
الگوی رسمی iframe
VIDEO_ID را با شناسهٔ واقعی از YouTube عوض کنید (دیالوگ Share → Embed خودش پر میکند). نمونهٔ زیر شکل رایج مبتدی را نشان میدهد که بعد از یکدو بار کپی میشناسید. آن را الگویی برای فهمیدن بدانید، نه دلیلی برای اختراع میزبان جاسازی از صفر.
YouTube embed iframe (example pattern)
html<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allowfullscreen>
</iframe>خواندن نمونهٔ جاسازی
iframeناحیهٔ پخشکنندهٔ شخصثالث را میسازدsrcباید شکل embed باشد (/embed/VIDEO_ID)، نه فقط صفحهٔ تماشای معمولی که در پیامرسان میچسبانیدwidthوheightفضا رزرو میکنند تا چیدمان هنگام بارگذاری پخشکننده نپردtitleقاب را برای فناوری کمکی نامگذاری میکند — خالی یا بیمعنی مثل «frame1» نگذاریدallowfullscreenوقتی میزبان و مرورگر اجازه دهند، تمامصفحه را ممکن میکند- قطعههای جدیدتر ممکن است
allowو ویژگیهای دیگر داشته باشند — آنچه دیالوگ رسمی میدهد نگه دارید - اول از Share → Embed بچسبانید؛ بعد اگر ستون محتوا لازم داشت اندازه را تنظیم کنید
چرا مبتدی باید کپی کند، نه اختراع
دستنویسی watch URL داخل src، ساختن query از خودتان، یا گذاشتن لینک کوتاه youtu.be در ویژگی اشتباه اغلب جعبهٔ خالی یا صفحهٔ غیرمنتظره داخل قاب میسازد. دیالوگ Embed یوتیوب URL و ویژگیهایی میدهد که با نیاز فعلی پخشکننده جور است. بعد از یک چسباندن موفق، الگو را میبینید و میتوانید ابعاد را عاقلانه عوض کنید بدون بازسازی URL از حافظه.
اندازه بدون شکستن صفحه
اندازههای شروع کلاسیک مثل 560 در 315 حس آشنای ۱۶:۹ روی صفحهٔ تمرین دسکتاپ میدهند. iframe خیلی کوچک کنترلها را پنهان و یادگیرنده را عصبانی میکند؛ خیلی بزرگ ممکن است صفحهٔ کوچک را سرریز کند یا متن را از اول صفحه بیرون براند. در اولین صفحهٔ تمرین با اندازهٔ رسمی شروع کنید، بعد اگر ستون باریک است کمی کوچک کنید. درسهای بعدی CSS جاسازی روان را با wrapper و نسبت تصویر پوشش میدهند؛ اینجا هدف پخشکنندهٔ کارآمد و خواناست که چیدمان ساده را خراب نکند.
هزینهٔ شخصثالث و حریم خصوصی
جاسازی YouTube درخواست شبکه به سرورهای Google اضافه میکند. بسته به تنظیم مرورگر، منطقه و گزینههای پخشکننده ممکن است کوکی یا ذخیرهٔ مشابه درگیر شود. صفحهٔ شما همچنین به در دسترس بودن YouTube و عمومی (یا قابلجاسازی) ماندن ویدیو وابسته است. این معامله برای بسیاری از دموهای آموزشی و آموزشهای عمومی قابل قبول است. برای کلیپ خصوصی کلاسی که مال شماست و باید آفلایندوست بماند، video خودمیزبان اغلب تمیزتر است. عمدی انتخاب کنید: جاسازی وقتی کلیپ از قبل روی YouTube است و پخشکنندهٔ آنها را میخواهید؛ میزبانی وقتی کنترل کامل فایل و درخواست شخصثالث کمتر میخواهید.
YouTube در برابر video در برابر audio
- کلیپ از قبل روی YouTube، پخشکنندهٔ آنها → جاسازی
iframeاز Share → Embed - MP4/WebM خودتان روی سرور →
videoباcontrols(جلسهٔ قبل) - فایل صدای خودتان →
audioباcontrols(جلسهٔ قبل)
MP4 محلی را داخل iframe یوتیوب نپیچید. watch URL یوتیوب را داخلsrcعنصرvideoنگذارید و انتظار پخشکنندهٔ بومی HTML نداشته باشید. «لینک ویدیو در پاراگراف» را با «جاسازی پخشکننده» قاطی نکنید. ابزار را با محل زندگی رسانه و نحوهٔ پخش جور کنید.
عادت دسترسپذیری برای جاسازی
به iframe یک title واضح بدهید که موضوع ویدیو را بگوید، نه فقط برای همیشه «YouTube video player» اگر میتوانید مشخصتر باشید. متن اطراف بگذارید که چرا کلیپ روی صفحه است. اگر محتوای گفتاری برای درس ضروری است، وقتی میتوانید به رونوشت پیوند دهید یا خلاصه بچسبانید — iframe بهتنهایی جایگزین متن صفحه مثل یک پاراگراف خوب نمیشود. کاربران صفحهکلید هنوز به صفحهای نیاز دارند که قبل و بعد از پخشکنندهٔ قابشده معنا داشته باشد.
تمرین در ویرایشگر
- هر ویدیوی عمومی YouTube را که اجازهٔ جاسازی برای تمرین دارید باز کنید.
- Share → Embed را بزنید و کل قطعهٔ iframe را کپی کنید.
- داخل
bodyصفحهٔ تمرین، زیر یک عنوان کوتاه که کلیپ را نام میبرد بچسبانید. - صفحه را محلی (با دسترسی شبکه) باز کنید و بار شدن پخشکننده را تأیید کنید.
width/heightرا کمی عوض کنید و خوانایی چیدمان را دوباره ببینید.- مطمئن شوید iframe هنوز
titleمعنادار دارد، بعد یک جمله متن زمینهٔ اطراف بنویسید.
اشتباهات آسان
- دستنویسی URL جاسازی غلط یا چسباندن لینک تماشای معمولی در
src - فراموش کردن
titleمفید روی iframe - خیلی کوچک یا خیلی بزرگ کردن iframe بدون چک بقیهٔ چیدمان
- قاطی کردن جاسازی YouTube با فایلهای خودمیزبان
video/audio - انتظار کار کامل iframe بدون شبکه به YouTube
- حذف متن درس اطراف و تکیه فقط به پخشکننده
- فرض اینکه هر ویدیو جاسازی را اجازه میدهد — بعضی مالکان خاموش میکنند
- فقط watch URL را در پاراگراف کپی کردن و اسمش را «جاسازی» گذاشتن
خلاصه
- جاسازی YouTube از
iframeبا URL جاسازی استفاده میکند - Share → Embed را ترجیح دهید تا قطعه درست بماند
- پخشکننده را عاقلانه اندازه بگیرید و
titleواضح نگه دارید - یادتان باشد محتوای شخصثالث است، نه فایل محلی روی دیسک شما
- وقتی خودتان میزبان فایل هستید از
videoیاaudioاستفاده کنید؛ وقتی YouTube میزبان پخشکننده است از iframe
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود