خاصية YouTube في لغة HTML تتمثل بشكل أساسي في تضمين فيديوهات YouTube داخل صفحات الويب باستخدام عنصر <iframe>. هذا العنصر يسمح لك بعرض فيديو YouTube مباشرةً على صفحتك دون الحاجة لمغادرة المستخدم لموقعك.

إليك كيفية استخدامها وشرح للعناصر الهامة:

الكود الأساسي:

HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

شرح العناصر:

  • <iframe>: هذا هو العنصر الذي يُستخدم لتضمين محتوى خارجي، مثل فيديوهات YouTube.

  • width و height: تحدد عرض وارتفاع مشغل الفيديو. يمكنك تعديل هذه القيم لتناسب تصميم صفحتك. من المستحسن استخدام نسب عرض إلى ارتفاع 16:9 (مثل 560x315 أو 853x480) للحفاظ على جودة الفيديو. يمكنك أيضاً استخدام وحدات أخرى مثل النسب المئوية لتجعله متجاوباً مع أحجام الشاشات المختلفة.

  • src: هذا هو أهم جزء. يحتوي على رابط الفيديو. الجزء الهام هو /embed/VIDEO_ID. استبدل VIDEO_ID بمعرّف الفيديو الفعلي من YouTube.

    • كيف تحصل على VIDEO_ID؟ اذهب إلى فيديو YouTube الذي تريده. ستجد رابط الفيديو في شريط العنوان. VIDEO_ID هو الجزء الموجود بعد v= أو بعد youtu.be/. مثال: إذا كان الرابط هو https://www.youtube.com/watch?v=dQw4w9WgXcQ، فإن VIDEO_ID هو dQw4w9WgXcQ.

  • title: يوفر وصفًا للفيديو لأغراض إمكانية الوصول.

  • frameborder: يُستخدم لتحديد ما إذا كان سيتم عرض إطار حول الفيديو أم لا. القيمة 0 تُزيل الإطار.

  • allow: تحدد الميزات التي يُسمح لمشغل الفيديو باستخدامها. القيم المذكورة (accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share) هي مجموعة شائعة تُفعّل معظم الوظائف.

  • allowfullscreen: يسمح للمستخدم بعرض الفيديو بملء الشاشة.

خيارات إضافية في رابط src:

يمكنك إضافة معلمات إضافية إلى رابط src لتخصيص سلوك الفيديو:

  • autoplay=1: لتشغيل الفيديو تلقائيًا عند تحميل الصفحة (يجب الانتباه إلى سياسات التشغيل التلقائي في المتصفحات).
  • loop=1: لتكرار تشغيل الفيديو.
  • start=SECONDS: لبدء الفيديو من ثانية معينة. استبدل SECONDS برقم الثواني.
  • controls=0: لإخفاء أزرار التحكم في المشغل.
  • mute=1: لكتم صوت الفيديو عند البدء.

مثال مع خيارات إضافية:

HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&loop=1&start=10" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

هذا الكود سيُشغل الفيديو تلقائياً، يُكرره، ويبدأ من الثانية العاشرة.

باستخدام هذه المعلومات، يمكنك بسهولة تضمين فيديوهات YouTube في صفحات HTML وتخصيصها لتلبية احتياجاتك.