پرش به محتویات

Video

المان Video ویدیوهای YouTube، Vimeo یا self-hosted را با پلیر سفارشی، تصویر preview و آیکون overlay جاسازی می‌کند.

bricks-video-element

گزینه‌های منبع:

  • YouTube
  • Vimeo
  • Media
  • File URL
  • Dynamic Data

تنظیمات

منبع (Source)

  • Source (select) — نوع منبع ویدیو. گزینه‌ها: youtube، vimeo، media (کتابخانه رسانه)، file (URL فایل)، meta (dynamic data). پیش‌فرض: youtube.

  • Iframe title (text) — عنوان قابل دسترس برای iframe ویدیو. برای منابع YouTube و Vimeo در دسترس است.

تنظیمات YouTube

وقتی source روی «youtube» تنظیم شده در دسترس است:

  • YouTube video ID/URL (text) — ID ویدیوی YouTube یا URL کامل را وارد کنید. پیش‌فرض: 5DGo0AYOJ7s.

  • Autoplay (checkbox) — ویدیو را به‌طور خودکار هنگام بارگذاری صفحه پخش کنید. در موبایل پشتیبانی نمی‌شود. وقتی preview image فعال است در دسترس نیست.

  • Controls (checkbox) — کنترل‌های پلیر ویدیو را نمایش دهید. پیش‌فرض: فعال.

  • Loop (checkbox) — پخش ویدیو را تکرار کنید.

  • Mute (checkbox) — صدای ویدیو را قطع کنید.

  • Related videos from other channels (checkbox) — اجازه دهید YouTube ویدیوهای مرتبط از کانال‌های دیگر نمایش دهد.

  • Do not track (checkbox) — از حالت privacy-enhanced یوتیوب (youtube-nocookie.com) استفاده کنید.

تنظیمات Vimeo

وقتی source روی «vimeo» تنظیم شده در دسترس است:

  • Vimeo video ID/URL (text) — ID ویدیوی Vimeo یا URL کامل را وارد کنید.

  • Vimeo privacy hash (text) — برای ویدیوهای unlisted Vimeo الزامی‌است.

  • Autoplay (checkbox) — ویدیو را به‌طور خودکار هنگام بارگذاری صفحه پخش کنید. وقتی preview image فعال است در دسترس نیست.

  • Loop (checkbox) — پخش ویدیو را تکرار کنید.

  • Mute (checkbox) — صدای ویدیو را قطع کنید.

  • Byline (checkbox) — byline ویدیو را نمایش دهید. پیش‌فرض: فعال.

  • Title (checkbox) — عنوان ویدیو را نمایش دهید. پیش‌فرض: فعال.

  • User portrait (checkbox) — پرتره کاربر را نمایش دهید. پیش‌فرض: فعال.

  • Do not track (checkbox) — ویژگی Do Not Track ویمئو را فعال کنید.

  • Color (color) — رنگ سفارشی برای کنترل‌های پلیر Vimeo.

تصویر Preview

وقتی source روی «youtube» یا «vimeo» تنظیم شده در دسترس است:

  • Preview image (select) — منبع preview image را انتخاب کنید. گزینه‌ها: default (API)، custom. iframe ویدیو بعد از کلیک روی preview image به‌صورت lazy بارگذاری می‌شود.

  • Custom preview image (image) — preview image سفارشی آپلود/انتخاب کنید. فقط وقتی preview image روی «custom» تنظیم شده در دسترس است.

  • Image size (select) — اندازه preview image یوتیوب. گزینه‌ها: default (120x90)، medium (320x180)، high (480x360)، standard (640x480)، maximum (1280x720). فقط برای YouTube با preview image پیش‌فرض در دسترس است.

تنظیمات Media/File

وقتی source روی «media»، «file» یا «meta» تنظیم شده در دسترس است:

منبع Media

  • Media (video) — فایل ویدیو را از کتابخانه رسانه آپلود یا انتخاب کنید. فقط وقتی source روی «media» تنظیم شده در دسترس است.

منبع File

  • Video file URL (text) — URL مستقیم به فایل ویدیو را وارد کنید. فقط وقتی source روی «file» تنظیم شده در دسترس است.

منبع Dynamic Data

  • Dynamic data (text) — dynamic data برای منبع ویدیو انتخاب کنید. فقط وقتی source روی «meta» تنظیم شده در دسترس است.

کنترل‌های ویدیو

  • Preload (select) — رفتار preload ویدیو. گزینه‌ها: metadata، auto، none.

  • Autoplay (checkbox) — ویدیو را به‌طور خودکار هنگام بارگذاری صفحه پخش کنید.

  • Loop (checkbox) — پخش ویدیو را تکرار کنید.

  • Mute (checkbox) — صدای ویدیو را قطع کنید.

  • Play inline (checkbox) — ویدیو را inline به‌جای تمام‌صفحه در موبایل پخش کنید.

  • Controls (checkbox) — کنترل‌های پلیر ویدیو را نمایش دهید. پیش‌فرض: فعال.

  • Disable download (checkbox) — دکمه دانلود را از کنترل‌ها حذف کنید. Firefox: پشتیبانی نمی‌شود.

  • Disable fullscreen (checkbox) — دکمه تمام‌صفحه را از کنترل‌ها حذف کنید. Firefox: پشتیبانی نمی‌شود.

  • Disable remote playback (checkbox) — دکمه remote playback را از کنترل‌ها حذف کنید. Firefox: پشتیبانی نمی‌شود.

  • Poster (image) — تصویر poster برای SEO ویدیو تنظیم کنید. به‌عنوان preview image برای منابع YouTube/Vimeo استفاده می‌شود.

Overlay / آیکون

  • Overlay (background) — استایل‌دهی پس‌زمینه برای overlay ویدیو.

  • Icon (icon) — آیکون نمایش داده‌شده روی overlay ویدیو را انتخاب کنید.

  • aria-label (text) — برچسب دسترسی‌پذیری برای آیکون یا overlay.

  • Icon typography (typography) — تنظیمات typography برای آیکون (اندازه، رنگ).

  • Icon padding (spacing) — padding دور آیکون.

  • Icon background color (color) — رنگ پس‌زمینه آیکون.

  • Icon border (border) — استایل border برای آیکون.

  • Icon box shadow (box-shadow) — box shadow برای آیکون.

مشکلات شناخته‌شده

سازگاری با افزونه Perfmatters

فعال کردن تنظیم «YouTube Preview Thumbnails» افزونه Perfmatters ممکن است منجر به فضای خالی بالای ویدیوهای YouTube شود. راه‌حل احتمالی اضافه کردن CSS زیر است:

.brxe-video .perfmatters-lazy-youtube {
    margin-top: -56.25%;
}

مرجع توسعه‌دهنده

برای JSON schema کامل به Video Schema مراجعه کنید.