فيديو YouTube HTML

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

هل تشعر بالحيرة حول صيغة الفيديو؟

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

حل أكثر بساطة هو تشغيل الفيديو على صفحتك من YouTube.

YouTube Video Id

عند حفظ (أو تشغيل) الفيديو، سيظهر YouTube ID (مثل ih1l6wb7LhU).

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

شامل YouTube في HTML

لتشغيل الفيديو على صفحتك، قم بإجراء ما يلي:

  • أرسل الفيديو إلى YouTube
  • تذكر ID الفيديو
  • تعريف في صفحتك <iframe> عنصر
  • ل src محددات URL الفيديو
  • استخدام width و height محددات حجم مشغل الفيديو
  • إضافة معلمات أخرى إلى URL (انظر أدناه)

مثال

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

جربها بنفسك

YouTube Autoplay + Silence

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

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

في autoplay=1 إضافة بعد ذلك mute=1، يمكن أن تبدأ فيديوهاتكم تلقائيًا (لكنها ستكون صامتة).

YouTube - Autoplay + Muted

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

جربها بنفسك

YouTube Playlist

قائمة الفيديوهات التي سيتم عرضها مفصولة بالكوما (استثنًا URL الأصلي).

YouTube Loop

إضافة loop=1 سيجعل فيديوكم يتكرر للأبد.

القيمة 0 (الافتراضية): سيقوم الفيديو بالعرض مرة واحدة.

القيمة 1: سيقوم الفيديو بالتكرار (بأبد الدهر).

YouTube - Loop

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

جربها بنفسك

وحدات التحكم YouTube

إضافة controls=0 سيجعل مشغل الفيديو لا يظهر وحدات التحكم.

القيمة 0: لا تظهر وحدات التحكم في مشغل الفيديو.

القيمة 1 (الافتراضية): عرض وحدات التحكم في مشغل الفيديو.

YouTube - Controls

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

جربها بنفسك