אפשר להטמיע סרטוני YouTube ישירות בדפי DevSite באמצעות הרכיב המותאם אישית <devsite-video>. כל הסרטונים רספונסיביים ושומרים על יחס גובה-רוחב של 16:9 כשרוחב שדה הראייה משתנה.
כדי להטמיע סרטון YouTube, מוסיפים לדף רכיב <devsite-video> מותאם אישית ומגדירים את המאפיין video-id לערך של פרמטר ה-URL v של הסרטון.
לדוגמה, כדי להטמיע את סרטון YouTube 'הסקריפט הראשון שלך – הדרכות בנושא Apps Script' שזמין בכתובת 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>
הדגמה (דמו)
מרחף שמאלה
בדוגמה הבאה מוצג איך מוצג סרטון YouTube מוטמע כשהקוד <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>
הדגמה (דמו)
רוחב מלא
בדוגמה הבאה מוצג איך מוצג סרטון 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 Analytics באופן אוטומטי. מומלץ להשתמש בווידג'ט הזה, למעט במקרים מיוחדים שבהם לא רוצים לאסוף נתוני שימוש של סרטון מוטמע. בלי זה, סטטיסטיקות השימוש בסרטון לא יישלחו ל-Analytics.