ویدئو YouTube HTML

پیشنهاد دوره:

ساده‌ترین روش برای قرار دادن ویدئو در HTML، استفاده از YouTube است.

دوئم؟ فرمت ویدئو را دردسرساز می‌کنید؟

تغییر فرمت ویدئو ممکن است دشوار و زمان‌بر باشد.

یک راه حل ساده‌تر این است که YouTube ویدئو را در صفحه وب شما پخش کند.

شناسه ویدئو YouTube

هنگام ذخیره‌سازی (یا پخش) ویدئو، YouTube یک شناسه (مثلاً ih1l6wb7LhU) نمایش می‌دهد.

شما می‌توانید از این شناسه استفاده کنید و ویدئوی خود را در کد HTML ارجاع دهید.

ویدئو YouTube را در HTML قرار دهید

  • برای پخش ویدئو در صفحه وب، عمل زیر را انجام دهید:
  • ویدئو را به YouTube آپلود کنید
  • شناسه ویدئو را یادداشت کنید در صفحه وب خود تعریف کنید <iframe>
  • عنصر src 属性 برای اشاره به URL ویدئو استفاده کنید
  • از ویژگی width و height ویژگی‌ها برای تعیین اندازه پخش‌کننده
  • برای اضافه کردن پارامترهای دیگر به URL (مطالعه بیشتر در زیر)

مثال

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

آزمایش کنید

YouTube Autoplay + ساکت

شما می‌توانید با اضافه کردن autoplay=1 به URL YouTube، ویدئو را در هنگام بازدید کاربران از صفحه به صورت خودکار شروع به پخش کنید. اما، شروع خودکار پخش ویدئو ممکن است باعث آزار بازدیدکنندگان شما شود!

توجه:در بیشتر موارد، مرورگرهای Chromium اجازه پخش خودکار را نمی‌دهند. اما همیشه اجازه پخش ساکت را می‌دهند.

در autoplay=1 بعد از اضافه کردن mute=1، باعث می‌شود که ویدیوی شما به صورت خودکار شروع به پخش شود ( اما ساکت است ).

YouTube - خودکار پخش + ساکت

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

آزمایش کنید

لیست پخش YouTube

لیست ویدیوهایی که باید پخش شوند ( به استثنای URL اصلی ).

چرخه‌ای YouTube

افزودن loop=1 این باعث می‌شود که ویدیوی شما همیشه چرخه‌ای پخش شود.

مقدار 0 ( پیش‌فرض ): ویدیو یک بار پخش می‌شود.

مقدار 1: ویدیو به صورت چرخه‌ای پخش می‌شود ( همیشه ).

YouTube - چرخه‌ای

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

آزمایش کنید

کنترل‌های YouTube

افزودن controls=0 این باعث می‌شود که کنترل‌های پخش‌کننده نمایش داده نشوند.

مقدار 0: کنترل‌های پخش‌کننده نمایش داده نمی‌شوند.

مقدار 1 ( پیش‌فرض ): کنترل‌های پخش‌کننده نمایش داده می‌شوند.

YouTube - کنترل‌ها

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

آزمایش کنید