Mit dem benutzerdefinierten Element <devsite-video> können Sie YouTube-Videos direkt in DevSite-Seiten einbetten. Alle Videos sind responsiv und behalten ein Seitenverhältnis von 16:9 bei, wenn sich die Breite des Darstellungsbereichs ändert.
Wenn Sie ein YouTube-Video einbetten möchten, fügen Sie Ihrer Seite ein benutzerdefiniertes Element vom Typ <devsite-video> hinzu und legen Sie für das Attribut video-id den Wert des URL-Parameters v für das Video fest.
Wenn Sie beispielsweise das YouTube-Video „Your First Script – Apps Script Tutorials“ (Ihr erstes Script – Apps Script-Anleitungen) unter https://www.youtube.com/watch?v=Pgfbl_o9WvM einbetten möchten, fügen Sie Ihrer DevSite-Seite das folgende <devsite-video>-benutzerdefinierte Element hinzu:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Wickeln Sie das benutzerdefinierte Element <devsite-video> dann in ein <div>-Element ein, dessen class-Attribut auf einen der folgenden Werte festgelegt ist:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Standard
Im folgenden Beispiel wird gezeigt, wie ein eingebettetes YouTube-Video angezeigt wird, wenn <devsite-video> in ein <div>-Element eingehüllt ist, dessen class-Attribut auf video-wrapper festgelegt ist.
Auf großen Bildschirmen nimmt das Video 50% der Breite des Inhaltsbereichs ein und wird rechts neben allen Inhalten angezeigt, die dem Video vorausgehen. Auf kleinen Bildschirmen nimmt das Video 100% der Breite des Inhaltsbereichs ein.
Code
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Links schweben
Im folgenden Beispiel wird gezeigt, wie ein eingebettetes YouTube-Video angezeigt wird, wenn <devsite-video> in ein <div>-Element eingehüllt ist, dessen Klassenattribut auf video-wrapper-left festgelegt ist.
Auf großen Bildschirmen nimmt das Video 50% der Breite des Inhaltsbereichs ein und wird links neben allen Inhalten angezeigt, die dem Video vorausgehen. Auf kleinen Bildschirmen nimmt das Video 100% der Breite des Inhaltsbereichs ein.
Code
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Volle Breite
Im folgenden Beispiel wird gezeigt, wie ein eingebettetes YouTube-Video angezeigt wird, wenn <devsite-video> in ein <div>-Element eingehüllt ist, dessen class-Attribut auf video-wrapper-full-width festgelegt ist.
Das Video nimmt 100% der Breite des Inhaltsbereichs ein und hat keine Auswirkungen auf das Layout der Inhalte, die dem Video vorausgehen.
Code
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Hinweise
In allen Codebeispielen wird das YouTube-Widget von DevSite verwendet, mit dem Google Analytics-Daten automatisch erfasst werden. Verwenden Sie dieses Widget, es sei denn, Sie möchten keine Nutzungsstatistiken für ein eingebettetes Video erfassen. Andernfalls werden keine Nutzungsstatistiken für dein Video an Analytics gesendet.