يمكنك تضمين فيديوهات YouTube مباشرةً في صفحات DevSite باستخدام العنصر المخصّص <devsite-video>. جميع الفيديوهات متجاوبة وتحافظ على نسبة عرض إلى ارتفاع تبلغ 16:9 عند تغيير عرض إطار العرض.
لتضمين فيديو على YouTube، أضِف عنصرًا مخصّصًا من النوع <devsite-video> إلى صفحتك واضبط السمة video-id على قيمة مَعلمة عنوان URL v للفيديو.
على سبيل المثال، لتضمين فيديو YouTube "Your First Script - Apps Script Tutorials" الذي يمكنك العثور عليه على الرابط 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% من عرض مساحة المحتوى ويظهر على يمين أي محتوى يسبقه. على الشاشات الصغيرة، يشغل الفيديو عرض منطقة المحتوى بالكامل.
الرمز
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
عرض توضيحي
مُعلّق على يمين الصفحة
يوضّح المثال التالي كيفية عرض فيديو مضمّن على YouTube عند تضمين <devsite-video> في عنصر <div> تم ضبط سمة الفئة فيه على video-wrapper-left.
على الشاشات الكبيرة، يشغل الفيديو 50% من عرض مساحة المحتوى ويظهر على يمين أي محتوى يسبقه. على الشاشات الصغيرة، يشغل الفيديو عرض منطقة المحتوى بالكامل.
الرمز
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
عرض توضيحي
العرض بالكامل
يوضّح المثال التالي كيفية عرض فيديو YouTube مضمّن عندما يتم لف <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>
عرض توضيحي
ملاحظات
تستخدِم جميع أمثلة الرموز البرمجية أداة تضمين YouTube في DevSite، والتي تتتبّع بيانات "إحصاءات Google" تلقائيًا. استخدِم هذه الأداة، باستثناء الحالات الخاصة التي لا تريد فيها جمع إحصاءات الاستخدام لمقطع فيديو مضمّن. وفي حال عدم تفعيله، لن يتم إرسال إحصاءات الاستخدام الخاصة بالفيديو إلى "إحصاءات Google".