您可以使用 <devsite-video> 自訂元素，直接在 DevSite 頁面中嵌入 YouTube 影片。所有影片都會隨螢幕寬度變更而調整為 16:9 的響應式顯示模式。
如要嵌入 YouTube 影片，請在頁面中加入 <devsite-video> 自訂元素，並將 video-id 屬性設為影片的 v 網址參數值。
舉例來說，如要嵌入 YouTube 影片「Your First Script - Apps Script Tutorials」，請前往 https://www.youtube.com/watch?v=Pgfbl_o9WvM 觀看這部影片，然後在 DevSite 頁面中加入下列 <devsite-video> 自訂元素：
<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>
預設
以下範例說明當 <devsite-video> 包裝在 <div> 元素中，且 class 屬性設為 video-wrapper 時，如何顯示嵌入的 YouTube 影片。
在大型螢幕上，影片的寬度為內容區域寬度的 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 時，如何顯示嵌入式 YouTube 影片。
在大型螢幕上，影片的寬度為內容區域寬度的 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 時，如何顯示嵌入的 YouTube 影片。
影片的寬度為內容區域的 100%，且不會影響影片前方的任何內容版面配置。
程式碼
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
示範
附註
所有程式碼範例都會使用 DevSite 的 嵌入 YouTube 小工具，自動追蹤 Google Analytics 資料。除非您不想收集內嵌影片的用量統計資料，否則請使用這個小工具。否則系統不會將影片的用量統計資料傳送至 Analytics。