Vous pouvez intégrer des vidéos YouTube directement dans les pages DevSite à l'aide de l'élément personnalisé <devsite-video>. Toutes les vidéos sont responsives et conservent un format 16:9 à mesure que la largeur de la fenêtre change.
Pour intégrer une vidéo YouTube, ajoutez un élément personnalisé <devsite-video> à votre page et définissez l'attribut video-id sur la valeur du paramètre d'URL v de la vidéo.
Par exemple, pour intégrer la vidéo YouTube "Votre premier script : tutoriels Apps Script" disponible à l'adresse https://www.youtube.com/watch?v=Pgfbl_o9WvM, ajoutez l'élément personnalisé <devsite-video> suivant à votre page DevSite :
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Encapsulez ensuite l'élément personnalisé <devsite-video> dans un élément <div> dont l'attribut class est défini sur l'une des valeurs ci-dessous:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Par défaut
L'exemple suivant montre comment une vidéo YouTube intégrée s'affiche lorsque <devsite-video> est encapsulé dans un élément <div> dont l'attribut class est défini sur video-wrapper.
Sur les grands écrans, la vidéo occupe 50% de la largeur de la zone de contenu et flotte à droite de tout contenu qu'elle précède. Sur les petits écrans, la vidéo occupe 100% de la largeur de la zone de contenu.
Code
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Démo
Flottant à gauche
L'exemple suivant montre comment une vidéo YouTube intégrée s'affiche lorsque <devsite-video> est encapsulé dans un élément <div> dont l'attribut de classe est défini sur video-wrapper-left.
Sur les grands écrans, la vidéo occupe 50% de la largeur de la zone de contenu et flotte à gauche de tout contenu qu'elle précède. Sur les petits écrans, la vidéo occupe 100% de la largeur de la zone de contenu.
Code
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Démo
Pleine largeur
L'exemple suivant montre comment une vidéo YouTube intégrée s'affiche lorsque <devsite-video> est encapsulé dans un élément <div> dont l'attribut class est défini sur video-wrapper-full-width.
La vidéo occupe 100% de la largeur de la zone de contenu et n'affecte pas la mise en page des contenus qui la précèdent.
Code
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Démo
Remarques
Tous les exemples de code utilisent le widget YouTube intégré de DevSite, qui suit automatiquement les données Google Analytics. Utilisez ce widget, sauf dans les cas particuliers où vous ne souhaitez pas collecter de statistiques d'utilisation pour une vidéo intégrée. Sans cela, les statistiques d'utilisation de votre vidéo ne seront pas envoyées à Analytics.