جاري التحميل...

يوتيوب في 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 صفحتك. ضع width وheight معقولين. src هو عنوان تضمين YouTube لذلك الفيديو. فضّل الحوار الرسمي حتى تبقى الصلاحيات وشكل الرابط والسمات المقترحة صحيحة بدل التخمين من رابط دردشة.

نمط iframe الرسمي

استبدل VIDEO_ID بالمعرّف الحقيقي من YouTube (حوار Share → Embed يملأه لك). المثال أدناه الشكل الشائع للمبتدئ بعد نسخ مرة أو مرتين. اعتبره نمطًا للفهم لا سببًا لاختراع مضيف تضمين من الصفر.

YouTube embed iframe (example pattern)

html

HTML Code

<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allowfullscreen>
</iframe>

قراءة عينة التضمين

iframe ينشئ منطقة المشغّل الطرف الثالث
يجب أن يكون src شكل التضمين (/embed/VIDEO_ID) لا صفحة المشاهدة العادية فقط
width وheight يحجزان مساحة حتى لا يقفز التخطيط عند التحميل
title يسمّي الإطار لتقنيات المساعدة — لا تتركه فارغًا أو بلا معنى
allowfullscreen يسمح بالتوسّع عندما يسمح المضيف والمتصفح
قد تتضمن مقتطفات أحدث allow وسمات أخرى — احتفظ بما يعطيه الحوار الرسمي
الصق من Share → Embed أولًا ثم عدّل الحجم إن لزم عمود المحتوى

لماذا ينسخ المبتدئ ولا يخترع

كتابة عنوان مشاهدة يدويًا في src أو اختراع استعلامات أو وضع رابط youtu.be القصير في السمة الخطأ غالبًا يعطي صندوقًا فارغًا. حوار Embed يوفّر عنوانًا وسمات تطابق متطلبات المشغّل الحالية. بعد لصق ناجح ترى النمط ويمكنك ضبط الأبعاد بعقل دون إعادة بناء الرابط من الذاكرة.

الحجم دون كسر الصفحة

أحجام البداية الكلاسيكية مثل 560 و315 تعطي إحساس 16:9 مألوفًا. إطار صغير جدًا يخفي التحكمات؛ كبير جدًا قد يفيض الشاشات الصغيرة. ابدأ بالأحجام الرسمية ثم صغّر قليلًا إن كان العمود ضيقًا. دروس CSS لاحقًا تغطي التضمين المتجاوب؛ هنا الهدف مشغّل يعمل دون إفساد تخطيط بسيط.

تكلفة الطرف الثالث والخصوصية

تضمين YouTube يضيف طلبات شبكة إلى خوادم Google. حسب الإعدادات والمنطقة وخيارات المشغّل قد تدخل ملفات تعريف ارتباط أو تخزين مشابه. صفحتك تعتمد أيضًا على بقاء YouTube متاحًا وبقاء الفيديو قابلاً للتضمين. ذلك مقبول لكثير من الدروس العامة. لمقاطع صفّية خاصة تملكها وتريدها ودّية دون اتصال، غالبًا video المستضاف ذاتيًا أنظف. اختر عمدًا: تضمين عندما يعيش المقطع على YouTube؛ استضافة عندما تريد سيطرة كاملة على الملف.

YouTube مقابل video مقابل audio

مقطع على YouTube ومشغّلهم → تضمين iframe من Share → Embed
MP4/WebM خاصتك على خادمك → video مع controls
ملف صوت خاصتك → audio مع controls
لا تلف MP4 محليًا في iframe يوتيوب. لا تضع عنوان مشاهدة YouTube في src لـ video وتتوقع مشغّل HTML أصليًا. طابق الأداة بمكان الوسائط.

عادات إمكانية الوصول للتضمين

أعطِ iframe عنوانًا title واضحًا يصف موضوع الفيديو. ابقِ نصًا محيطًا يشرح لماذا المقطع في الصفحة. إن كان المحتوى المنطوق أساسيًا للدرس، اربط نصًا مكتوبًا أو الصق ملخصًا عندما تستطيع — الإطار وحده لا يستبدل نص الصفحة.

تمرين في المحرر

افتح أي فيديو YouTube عام يُسمح بتضمينه للتدريب.
استخدم Share → Embed وانسخ مقتطف iframe كاملًا.
الصقه في body تحت عنوان قصير يسمّي المقطع.
افتح الصفحة محليًا (مع شبكة) وتأكد من تحميل المشغّل.
غيّر width/height قليلًا وأعد فحص التخطيط.
تأكد أن للإطار title مفيدًا ثم اكتب جملة سياق حوله.

أخطاء سهلة

كتابة عنوان تضمين خاطئ أو لصق رابط مشاهدة عادي في src
نسيان title مفيد على iframe
جعل الإطار صغيرًا أو ضخمًا دون فحص التخطيط
خلط تضمينات YouTube مع ملفات video / audio المستضافة ذاتيًا
توقع عمل الإطار دون شبكة إلى YouTube
حذف نص الدرس المحيط والاعتماد على المشغّل فقط
افتراض أن كل فيديو يسمح بالتضمين
نسخ عنوان المشاهدة في فقرة وتسميته «تضمينًا»

ملخص

تضمينات YouTube تستخدم iframe يشير إلى عنوان تضمين
فضّل Share → Embed ليبقى المقتطف صحيحًا
حجّم المشغّل بعناية واحتفظ بـ title واضح
تذكّر أنه محتوى طرف ثالث لا ملف محلي على قرصك
استخدم video أو audio عندما تستضيف الملف؛ وiframe عندما يستضيف YouTube المشغّل

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة