انتقل إلى محتوى الدرس

HTML Youtube فيديو Youtube في لغة HTML

سوف تتعلم في هذا الدرس كيفية عرض مقاطع مرئية من منصة YouTube داخل صفحة HTML، وذلك عن طريق استخدام عنصر iframe.

1 صفوف تعليمية
لغة HTML
6,319 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تستطيع عن طريق لغة HTML عرض فيديو مرفوع على منصة youtube وذلك من خلال استخدام عنصر <iframe>.

يمتلك كل فيديو مرفوع على منصة Youtube رقم تعريف خاص به وحده، يدعى id يكون على سبيل المثال من الشكل: hbMjIlSmyUE


خطوات عرض فيديو موجود على youtube في صفحة HTML:

  1. اختر فيديو على YouTube يسمح مالكه بتضمينه، أو ارفع فيديو تملك حق نشره.
  2. احصل على ID الخاص بالفيديو؛ في رابط المشاهدة المعتاد هو قيمة المعامل v بعد watch?v=، وقد تليه معاملات أخرى. يمكنك أيضًا نسخ كود التضمين من خيار المشاركة في YouTube.
  3. قم بإضافة عنصر <iframe> داخل صفحة HTML.
  4. ضع src Attribute لعنصر <iframe>.
  5. يمكنك تحديد طول وعرض الفيديو عن طريق height and width Attributes من خلال إضافتهم لعنصر <iframe>. 
  6. داخل src Attribute نضع رابط youtube بهذا الشكل: https://www.youtube.com/embed/.
  7. ثم نضع في آخر الرابط رقم التعريف id الخاص بالفيديو ليصبح بهذا الشكل: https://www.youtube.com/embed/hbMjIlSmyUE.

فيديو Youtube في لغة HTML

HTML YouTube

عرض فيديو مرفوع على youtube في صفحة HTML، مع تحديد أبعاد العرض من خلال استخدام خاصيتي width وheight.

HTML
<iframe title="YouTube video" width="420" height="345" 
  src="https://www.youtube.com/embed/hbMjIlSmyUE">
</iframe>