You can embed YouTube videos directly in DevSite pages using the <devsite-video> custom element. All videos are responsive and maintain a 16:9 ratio as the viewport width changes.
To embed a YouTube video, add a <devsite-video> custom element to your page and set the video-id attribute to the value of the v URL parameter for the video.
For example, to embed the YouTube video "Your First Script - Apps Script Tutorials" that you can find at https://www.youtube.com/watch?v=Pgfbl_o9WvM
, add the following <devsite-video> custom element to your DevSite page:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Then wrap the <devsite-video> custom element in a <div> element whose class attribute is set to one of the values below:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Default
The following example shows how an embedded YouTube video is displayed when <devsite-video> is wrapped in a <div> element whose class attribute is set to video-wrapper.
On large screens, the video is 50% of the content area's width and floats to the right of any content the video precedes. On small screens, the video is 100% of the content area's width.
Code
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Floated left
The following example shows how an embedded YouTube video is displayed when <devsite-video> is wrapped in a <div> element whose class attribute is set to video-wrapper-left.
On large screens, the video is 50% of the content area's width and floats to the left of any content the video precedes. On small screens, the video is 100% of the content area's width.
Code
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Full-width
The following example shows how an embedded YouTube video is displayed when <devsite-video> is wrapped in a <div> element whose class attribute is set to video-wrapper-full-width.
The video is 100% of the content area's width and does not affect the layout of any content the video precedes.
Code
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Notes
All of the code examples use DevSite's Embed YouTube widget, which tracks Google Analytics data automatically. Except for special cases where you don't want to collect usage statistics for an embedded video, use this widget. Without it, usage statistics for your video will not be sent to Analytics.