ویدیو های یوتوب درHTML

ویدیوهای یوتیوب در HTML

ساده‌ترین راه برای پخش ویدیو در HTML، استفاده از یوتیوب است.

با فرمت‌های ویدیویی مشکل دارید؟

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

شناسه ویدیوی یوتیوب (Video Id)

هنگامی که شما یک ویدیو را ذخیره (یا پخش) می‌کنید، یوتیوب یک شناسه (مانند tgbNymZ7vqY) نمایش می‌دهد. شما می‌توانید از این شناسه استفاده کرده و در کد HTML خود به ویدیوی خود ارجاع دهید.

پخش ویدیوی یوتیوب در HTML

برای پخش ویدیوی خود در یک صفحه وب، کارهای زیر را انجام دهید:

1. ویدیو را در یوتیوب آپلود کنید.

2. شناسه ویدیو را یادداشت کنید.

3. یک عنصر <iframe> در صفحه وب خود تعریف کنید.

4. مقدار ویژگی src را برابر با URL ویدیو قرار دهید.

5. از ویژگی‌های width و height برای مشخص کردن ابعاد پخش‌کننده استفاده کنید.

6. هر پارامتر دیگری را به URL اضافه کنید (به پایین مراجعه کنید).

مثال

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

پخش خودکار + بی‌صدا در یوتیوب (Autoplay + Mute)

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

نکته: مرورگرهای مبتنی بر Chromium در بیشتر موارد اجازه پخش خودکار را نمی‌دهند. با این حال، پخش خودکار بی‌صدا (muted) همیشه مجاز است.

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

یوتیوب - پخش خودکار + بی‌صدا

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

لیست پخش یوتیوب (Playlist)

لیستی از ویدیوها که با کاما از هم جدا شده‌اند و (علاوه بر URL اصلی) پخش می‌شوند.

حلقه (Loop) در یوتیوب

playlist=videoID و loop=1 را اضافه کنید تا ویدیوی شما برای همیشه تکرار شود.

• loop=0 (پیش‌فرض) - ویدیو فقط یک بار پخش می‌شود.

• loop=1 - ویدیو به صورت حلقه (برای همیشه) تکرار می‌شود.

یوتیوب - حلقه بی‌پایان

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

کنترل‌های یوتیوب (Controls)

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

• controls=0 - کنترل‌های پخش‌کننده نمایش داده نمی‌شوند.

• controls=1 (پیش‌فرض) - کنترل‌های پخش‌کننده نمایش داده می‌شوند.

یوتیوب - کنترل‌ها

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