انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 43
دورة لغة HTML

فيديو YouTube في لغة HTMLHTML YouTube

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

ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
4
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
6,294
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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

تستطيع عن طريق لغة 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.
جرب الكود

HTML YouTube

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

HTML 
<iframe title="YouTube video" width="420" height="345" 
  src="https://www.youtube.com/embed/hbMjIlSmyUE">
</iframe>
جرّب بنفسك

YouTube autoplay التشغيل التلقائي لفيديو على YouTube في صفحة HTML

المعامل autoplay=1 في رابط تضمين YouTube يطلب بدء الفيديو تلقائيًا عند تحميل المشغّل؛ وهو معامل في الرابط وليس سمة HTML على <iframe>. يمكن أن تمنع سياسة المتصفح التشغيل التلقائي، خصوصًا مع الصوت.

يستخدم المثال autoplay=1&mute=1 لطلب التشغيل مع كتم الصوت، وallow="autoplay" للسماح بهذه الإمكانية داخل الإطار. هذا لا يضمن تجاوز سياسات المتصفح أو إعدادات المستخدم؛ يمكن للمستخدم بدء التشغيل من المشغّل إذا لم يبدأ تلقائيًا.

YouTube autoplay

تشغيل فيديو على youtube بشكل تلقائي مع عمل كتم لصوته، لكيلا نزعج الزوار.

HTML 
<iframe title="YouTube video" width="420" height="345" 
  src="https://www.youtube.com/embed/hbMjIlSmyUE?autoplay=1&mute=1" allow="autoplay">
</iframe>
جرّب بنفسك

YouTube playlist in HTML قوائم تشغيل اليوتيوب في لغة HTML

لتضمين قائمة تشغيل موجودة على YouTube نستخدم listType=playlist مع list الذي يحمل معرّف القائمة، مثل PL428F66D680D0A270. تختلف هذه القيمة عن معرّف فيديو منفرد.

أما المعامل playlist فيحمل قائمة معرّفات فيديوهات تفصل بينها فواصل، وليس معرّف قائمة تشغيل محفوظة. يشغّل المشغّل الفيديو المحدد في مسار الرابط أولًا ثم هذه الفيديوهات.

التكرار: يطلب loop=1 إعادة تشغيل الفيديو أو القائمة. لتكرار فيديو واحد في تضمين iframe أضف معرّفه نفسه إلى playlist؛ فمثلًا ينتهي الرابط بـ?playlist=hbMjIlSmyUE&loop=1. تظل إتاحة الفيديو والقائمة للتضمين شرطًا لعمل المثال.

YouTube playlist in HTML

عرض قائمة تشغيل مرفوعة على منصة youtube في صفحة الويب عن طريق لغة HTML.

HTML 
<iframe title="YouTube playlist" width="420" height="345" 
  src="https://www.youtube.com/embed?listType=playlist&amp;list=PL428F66D680D0A270">
</iframe>
جرّب بنفسك

YouTube controls in HTML التحكم في فيديوهات اليوتيوب في لغة HTML

المعامل controls=0 يخفي أدوات التحكم في مشغّل YouTube، مثل أزرار التشغيل وشريط التقدّم. لا يخفي الفيديو نفسه أو عنصر <iframe>. القيمة controls=1 هي الافتراضية لإظهار أدوات التحكم.

جرب الكود

YouTube controls in HTML

إخفاء أدوات التحكم في مشغّل فيديو اليوتيوب في لغة HTML عن طريق خاصية controls=0.

HTML 
<iframe title="YouTube video" width="420" height="345" 
  src="https://www.youtube.com/embed/hbMjIlSmyUE?controls=0">
</iframe>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات14

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 14 مفهومةأول بطاقة، أول خطوة
01 Youtube موقع يوتيوب
للمراجعة
02 Videos فيديوهات
للمراجعة
03 Iframe إطار
للمراجعة
04 Element عنصر
للمراجعة
05 Equal يساوي أو يعادل
للمراجعة
06 Attribute سمة
للمراجعة
07 Width عرض
للمراجعة
08 Height ارتفاع
للمراجعة
09 Autoplay تشغيل تلقائي
للمراجعة
10 Mute صامت
للمراجعة
11 Google Chrome موقع جوجل كروم
للمراجعة
12 Playlist قائمة التشغيل
للمراجعة
13 loop تكرار
للمراجعة
14 Control تحكم
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات3

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 3 مفهومةأول بطاقة، أول خطوة
01 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
للمراجعة
02 id id
Identity
معرف هوية فريد
للمراجعة
03 Src Src
source
مصدر
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

3أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي3 أسئلة تنتظرك
01

هل نستطيع عن طريق ال HTML ان تعرض فيديو مرفوع على ال YouTube ؟

02

ماهي الخاصية التي تستخدم في تحديد ما اذا كان سوف يتم تشغيل الفيديو بشكل تلقائي او لا ؟

03

ماهي الخاصية التي تستخدم في تحديد اخفاء او اظهار اطار تقدم الفيديو ؟