U kunt YouTube-video's rechtstreeks in DevSite-pagina's insluiten met behulp van het aangepaste element <devsite-video> . Alle video's zijn responsief en behouden een verhouding van 16:9 als de breedte van de viewport verandert.
Als u een YouTube-video wilt insluiten, voegt u een aangepast <devsite-video> -element toe aan uw pagina en stelt u het video-id -kenmerk in op de waarde van de v URL-parameter voor de video.
Als u bijvoorbeeld de YouTube-video 'Your First Script - Apps Script Tutorials' wilt insluiten, die u kunt vinden op https://www.youtube.com/watch?v=Pgfbl_o9WvM , voegt u het volgende aangepaste <devsite-video> -element toe aan uw DevSite-pagina:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Plaats vervolgens het aangepaste element <devsite-video> in een <div> -element waarvan class attribuut is ingesteld op een van de onderstaande waarden:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Standaard
Het volgende voorbeeld laat zien hoe een ingesloten YouTube-video wordt weergegeven wanneer <devsite-video> is verpakt in een <div> -element waarvan class attribuut is ingesteld op video-wrapper .
Op grote schermen beslaat de video 50% van de breedte van het inhoudsgebied en zweeft deze rechts van de inhoud die aan de video voorafgaat. Op kleine schermen beslaat de video 100% van de breedte van het inhoudsgebied.
Code
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Zweefde naar links
Het volgende voorbeeld laat zien hoe een ingesloten YouTube-video wordt weergegeven wanneer <devsite-video> is verpakt in een <div> -element waarvan het class-attribuut is ingesteld op video-wrapper-left .
Op grote schermen beslaat de video 50% van de breedte van het inhoudsgebied en zweeft deze links van de inhoud die aan de video voorafgaat. Op kleine schermen beslaat de video 100% van de breedte van het inhoudsgebied.
Code
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Volledige breedte
Het volgende voorbeeld laat zien hoe een ingesloten YouTube-video wordt weergegeven wanneer <devsite-video> is verpakt in een <div> -element waarvan class attribuut is ingesteld op video-wrapper-full-width .
De video beslaat 100% van de breedte van het inhoudsgebied en heeft geen invloed op de lay-out van de inhoud die aan de video voorafgaat.
Code
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Opmerkingen
Alle codevoorbeelden gebruiken de Embed YouTube-widget van DevSite, die automatisch Google Analytics-gegevens bijhoudt. Gebruik deze widget, behalve in speciale gevallen waarin u geen gebruiksstatistieken voor een ingesloten video wilt verzamelen. Zonder dit worden de gebruiksstatistieken voor uw video niet naar Analytics verzonden.