<devsite-video> カスタム要素を使用して、YouTube 動画を DevSite ページに直接埋め込むことができます。すべての動画はレスポンシブで、ビューポートの幅が変化しても 16:9 のアスペクト比を維持します。
YouTube 動画を埋め込むには、ページに <devsite-video> カスタム要素を追加し、video-id 属性を動画の v URL パラメータの値に設定します。
たとえば、https://www.youtube.com/watch?v=Pgfbl_o9WvM にある YouTube 動画「Your First Script - Apps Script Tutorials」を埋め込むには、次の <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> が class 属性が video-wrapper に設定された <div> 要素でラップされている場合、埋め込まれた 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> が class 属性が video-wrapper-full-width に設定された <div> 要素でラップされている場合、埋め込まれた 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 アナリティクスのデータが自動的にトラッキングされます。埋め込み動画の使用状況の統計情報を収集しない特別なケースを除き、このウィジェットを使用してください。有効にしないと、動画の使用状況の統計情報がアナリティクスに送信されません。