با استفاده از عنصر سفارشی <devsite-video> می‌توانید ویدیوهای YouTube را مستقیماً در صفحات DevSite جاسازی کنید. همه ویدیوها واکنش گرا هستند و نسبت 16:9 را با تغییر عرض درگاه دید حفظ می کنند.
برای جاسازی یک ویدیوی YouTube، یک عنصر سفارشی <devsite-video> را به صفحه خود اضافه کنید و ویژگی video-id را روی مقدار پارامتر v URL برای ویدیو تنظیم کنید.
به عنوان مثال، برای جاسازی ویدیوی YouTube "اولین اسکریپت شما - برنامه های آموزشی اسکریپت" که می توانید در https://www.youtube.com/watch?v=Pgfbl_o9WvM پیدا کنید، عنصر سفارشی <devsite-video> زیر را به خود اضافه کنید صفحه DevSite:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
سپس عنصر سفارشی <devsite-video> را در یک عنصر <div> بپیچید که ویژگی class آن بر روی یکی از مقادیر زیر تنظیم شده است:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
پیش فرض
مثال زیر نشان می‌دهد که چگونه یک ویدیوی YouTube تعبیه‌شده زمانی که <devsite-video> در یک عنصر <div> پیچیده می‌شود که ویژگی class آن روی video-wrapper تنظیم شده است، نمایش داده می‌شود.
در صفحه‌های بزرگ، ویدیو 50 درصد پهنای ناحیه محتوا است و در سمت راست هر محتوایی که ویدیو قبل از آن است شناور می‌شود. در صفحه نمایش های کوچک، ویدئو 100٪ از عرض منطقه محتوا است.
کد
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
نسخه ی نمایشی
به چپ شناور شد
مثال زیر نشان می دهد که چگونه یک ویدیوی یوتیوب جاسازی شده زمانی که <devsite-video> در یک عنصر <div> پیچیده می شود که ویژگی کلاس آن روی video-wrapper-left تنظیم شده است، نمایش داده می شود.
در صفحه‌های بزرگ، ویدیو 50 درصد پهنای منطقه محتوا است و در سمت چپ هر محتوایی که ویدیو قبل از آن است شناور می‌شود. در صفحه نمایش های کوچک، ویدئو 100٪ از عرض منطقه محتوا است.
کد
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
نسخه ی نمایشی
تمام عرض
مثال زیر نشان می دهد که چگونه یک ویدیوی یوتیوب جاسازی شده زمانی که <devsite-video> در یک عنصر <div> پیچیده می شود که ویژگی class آن روی video-wrapper-full-width تنظیم شده است، نمایش داده می شود.
این ویدئو 100٪ از عرض منطقه محتوا است و بر روی طرح بندی محتوای قبل از ویدیو تأثیر نمی گذارد.
کد
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
نسخه ی نمایشی
یادداشت ها
همه نمونه‌های کد از ویجت DevSite Embed YouTube استفاده می‌کنند که داده‌های Google Analytics را به‌طور خودکار ردیابی می‌کند. به جز موارد خاصی که نمی خواهید آمار استفاده را برای یک ویدیوی جاسازی شده جمع آوری کنید، از این ویجت استفاده کنید. بدون آن، آمار استفاده از ویدیوی شما به Analytics ارسال نمی شود.