HTML

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

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

التاريخ

29 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

2905

المواضيع

12
الشروحات chevron_left HTML YouTube chevron_left HTML

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

</> HTML Youtube
فيديو Youtube في لغة HTML

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

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


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

  1. قم برفع الفيديو على منصة youtube.
  2. احصل على ID الخاص بالفيديو وهو آخر جزء في رابط الفيديو بعد علامة اليساوي " = ".
  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.

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

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

عن طريق خاصية autoplay attribute يقوم المتصفح بتشغيل الفيديو المرفوع على youtube تلقائياً عند فتح صفحة الويب، وذلك عن طريق إضافة الخاصية autoplay مع القيمة autoplay=1 إلى رابط فيديو youtube داخل عنصر <iframe>،  لكن قد يسبب التشغيل التلقائي لفيديوهات اليوتيوب إزعاجاً لبعض زوار صفحة الويب.

  • يمكن وضع خاصية  " mute="1 بعد  "autoplay= "1 لكي يتم تشغيل الفيديو تلقائياً دون صوت (الفيديو صامت)، وذلك لتجنب إزعاج زوار صفحة الويب.
YouTube autoplay

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

<iframe width="420" height="345" 
  src="https://www.youtube.com/embed/hbMjIlSmyUE?autoplay=1&mute=1">
</iframe>
لا يسمح متصفح Google Chrome بفتح الفيديو تلقائي دون كتم صوته، عن طريق خاصية mute=1.

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

يمكن عرض قائمة تشغيل يوتيوب كاملة على صفحة الويب في لغة HTML، وذلك من خلال إضافة رقم التعريف ID الخاص بقائمة التشغيل playlist بدلاً من إضافة رقم التعريف ID الخاص بفيديو واحد، ليتم بذلك تشغيل سلسلة فيديوهات قائمة التشغيل بشكل متتالي، أي يتم تشغيل كل فيديو بعد انتهاء الفيديو قبله.

  • إضافة خاصية playlist إلى رابط الفيديو بداخل عنصر <iframe>.
  • نتبع خاصية playlist بعلامة يساوي "=" ونتبعها ب ID الخاص بقائمة التشغيل playlist.
  • تصبح الخاصية بهذا الشكل في نهاية الرابط  playlist=hbMjIlSmyUE.

youtube loop: عن طريق loop=1 يمكن إعادة تشغيل الفيديو عدد غير محدود من المرات، بشرط أن يكون فيديو واحد بداخل playlist.

YouTube playlist in HTML

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

<iframe width="420" height="345" 
  src="https://www.youtube.com/embed?v=4ZmxWLCiZKY&list=PL428F66D680D0A270">
</iframe>

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

يُمكنك عن طريق خاصية controls=إخفاء إطار الفيديو الذي يسمى controls.

YouTube controls in HTML

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

<iframe width="420" height="345" 
  src="https://www.youtube.com/embed/hbMjIlSmyUE?controls=0">
</iframe>
جميع الخصائص التي يتم كتابتها بعد رابط الفيديو أو بعد رابط playlist قوائم التشغيل، تتعلق بموقع youtube وليست خصائص HTML.
مصطلحات الدرس
Youtube
Youtube

موقع يوتيوب

Videos
Videos

فيديوهات

Iframe
Iframe

إطار

Element
Element

عنصر

Equal
Equal

يساوي أو يعادل

Width
Width

عرض

Height
Height

ارتفاع

Autoplay
Autoplay

تشغيل تلقائي

Mute
Mute

صامت

Google Chrome
Google Chrome

موقع جوجل كروم

Playlist
Playlist

قائمة التشغيل

loop
loop

تكرار

Control
Control

تحكم

اختصارات الدرس
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
id
id

Identity

معرف هوية فريد
Src
Src

source

مصدر
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.