قم برفع الفيديو على منصة 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.

معلومات تهمك

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

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

التالى

CLOSETAG

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

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات HTML YouTube HTML