52- مقاطع فيديو YouTube في HTML

أسهل طريقة لتشغيل مقاطع الفيديو في HTML هي استخدام YouTube.

هل تواجه صعوبة في تنسيقات الفيديو؟

قد يكون تحويل مقاطع الفيديو إلى تنسيقات مختلفة أمرًا صعبًا ويستغرق وقتًا طويلاً.

الحل الأسهل هو السماح لـ YouTube بتشغيل مقاطع الفيديو في صفحة الويب الخاصة بك.

معرف فيديو YouTube

يعرض YouTube معرفًا فريدًا (مثل tgbNymZ7vqY) عند حفظ مقطع فيديو أو تشغيله.

يمكنك استخدام هذا المعرف للإشارة إلى الفيديو الخاص بك في كود HTML.

تشغيل مقطع فيديو YouTube في HTML

لتشغيل مقطع فيديو على صفحة ويب، اتبع الخطوات التالية:

1. قم بتحميل الفيديو إلى YouTube:
   • انتقل إلى موقع YouTube وقم بتسجيل الدخول إلى حسابك.
   • انقر على زر “إنشاء” ثم “تحميل فيديو”.
   • حدد الفيديو الذي تريد تحميله واتبع التعليمات.
2. دوّن معرف الفيديو:
   • بعد تحميل الفيديو، ستجد معرف الفيديو (مثل tgbNymZ7vqY) في عنوان URL الخاص بالفيديو.
   • انسخ هذا المعرف.
3. عرّف عنصر <iframe> في صفحة الويب الخاصة بك:
   • في كود HTML لصفحة الويب، أضف العنصر التالي:
4. <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
   • استبدل VIDEO_ID بمعرف الفيديو الذي نسخته.
5. حدد أبعاد المشغل باستخدام width و height:
   • يمكنك تغيير قيم العرض (width) والارتفاع (height) في العنصر أعلاه لتتناسب مع حجم المشغل الذي تريده.
6. أضف أي معلمات أخرى إلى عنوان URL (اختياري):
   • يمكنك إضافة معلمات إضافية إلى عنوان URL للتحكم في سلوك المشغل، مثل:
     • autoplay=1: لتشغيل الفيديو تلقائيًا عند تحميل الصفحة.
     • controls=0: لإخفاء عناصر التحكم في المشغل.
     • start=60: لبدء تشغيل الفيديو عند 60 ثانية.

مثال:

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

تشغيل تلقائي وكتم صوت فيديوهات YouTube

يمكنك جعل الفيديو الخاص بك يبدأ التشغيل تلقائيًا عند زيارة المستخدم للصفحة، وذلك بإضافة autoplay=1 إلى عنوان URL الخاص بفيديو YouTube. ومع ذلك، فإن التشغيل التلقائي للفيديوهات قد يكون مزعجًا للزوار!

ملاحظة: لا تسمح متصفحات Chromium بالتشغيل التلقائي في معظم الحالات. لكن يُسمح دائمًا بالتشغيل التلقائي مع كتم الصوت.

أضف mute=1 بعد autoplay=1 لجعل الفيديو يبدأ التشغيل تلقائيًا ولكن مع كتم الصوت.

مثال: تشغيل تلقائي وكتم صوت على YouTube

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>

• frameborder=”0″: يزيل الإطار حول المشغل.
• allowfullscreen:: يسمح للمشغل بملء الشاشة.
• autoplay=1:: يشغل الفيديو تلقائيًا عند تحميل الصفحة.
• mute=1:: يشغل الفيديو مع كتم الصوت.

قوائم التشغيل وتكرارها على YouTube

قوائم التشغيل (Playlist):

• يمكنك إنشاء قائمة تشغيل من مقاطع فيديو YouTube ليتم تشغيلها بالتتابع باستخدام المعلمة “playlist” في عنوان URL.
• افصل معرفات الفيديو في القائمة بفاصلة.

مثال:

<iframe width="420" height="315" src="https://www.youtube.com/embed/VIDEO_ID1?playlist=VIDEO_ID2,VIDEO_ID3"></iframe>

تكرار الفيديوهات (Loop):

• لجعل الفيديو يتكرر باستمرار، أضف المعلمة “loop=1” إلى عنوان URL.
• القيم الممكنة:
  • 0 (الافتراضي): الفيديو يُعرض مرة واحدة فقط.
  • 1: الفيديو يُعرض بشكل متكرر (إلى الأبد).

مثال: تكرار فيديو YouTube

<iframe width="420" height="315" src="https://www.youtube.com/embed/VIDEO_ID?loop=1"></iframe>

• frameborder=”0″: يزيل الإطار حول المشغل.
• allowfullscreen:: يسمح للمشغل بملء الشاشة.
• playlist=VIDEO_IDS:: يحدد قائمة تشغيل من فيديوهات YouTube.
• loop=1:: يجعل الفيديو يتكرر باستمرار.

التحكم في عناصر الفيديو على YouTube

إخفاء عناصر التحكم:

• لمنع ظهور عناصر التحكم في مشغل الفيديو (مثل زر التشغيل والإيقاف المؤقت وشريط التقدم)، أضف المعلمة “controls=0” إلى عنوان URL.

مثال: إخفاء عناصر التحكم على YouTube

<iframe width="420" height="315" src="https://www.youtube.com/embed/VIDEO_ID?controls=0"></iframe>

• frameborder=”0″: يزيل الإطار حول المشغل.
• allowfullscreen:: يسمح للمشغل بملء الشاشة.
• controls=0:: يخفي عناصر التحكم في مشغل الفيديو.

القيم الممكنة لـ controls:

• 0: لا تُعرض عناصر التحكم.
• 1 (الافتراضي): تُعرض عناصر التحكم.