您可以使用 <devsite-video> 自定义元素直接在 DevSite 页面中嵌入 YouTube 视频。所有视频均为响应式视频，并且会随着视口宽度的变化而保持 16:9 的宽高比。
如需嵌入 YouTube 视频，请向您的网页添加 <devsite-video> 自定义元素，并将 video-id 属性设置为视频的 v 网址参数的值。
例如，如需嵌入 YouTube 视频“您的首个脚本 - Google Apps 脚本教程”（网址为 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>
默认
以下示例展示了当 <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> 封装在类属性设置为 video-wrapper-left 的 <div> 元素中时，嵌入的 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 的 Embed YouTube widget，该 widget 会自动跟踪 Google Analytics 数据。除非您不想收集嵌入式视频的使用情况统计信息，否则请使用此 widget。如果未启用此设置，系统将不会向 Google Analytics 发送视频的使用情况统计信息。