قم برفع الفيديو على منصة youtube.
احصل على ID الخاص بالفيديو وهو آخر جزء في رابط الفيديو بعد علامة اليساوي " = ".
قم بإضافة عنصر <iframe> داخل صفحة HTML.
ضع src Attribute لعنصر <iframe>.
يمكنك تحديد طول وعرض الفيديو عن طريق height and width Attributes من خلال إضافتهم لعنصر <iframe>.
داخل src Attribute نضع رابط youtube بهذا الشكل: https://www.youtube.com/embed/.
ثم نضع في آخر الرابط رقم التعريف 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=0 إخفاء إطار الفيديو الذي يسمى 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.

مصطلحات الدرس

موقع يوتيوب

فيديوهات

إطار

عنصر

Equal

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

Attribute

سمة

Width

عرض

Height

ارتفاع

Autoplay

تشغيل تلقائي

Mute

صامت

Google Chrome

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

Playlist

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

loop

تكرار

Control

تحكم

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

HTML

Hypertext Markup Language

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

Identity

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

Src

source

مصدر

معلومات تهمك

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

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات HTML YouTube HTML