Anda dapat menyematkan video YouTube langsung di halaman DevSite menggunakan elemen kustom <devsite-video>. Semua video bersifat responsif dan mempertahankan rasio 16:9 saat lebar area pandang berubah.
Untuk menyematkan video YouTube, tambahkan elemen kustom <devsite-video> ke halaman Anda dan tetapkan atribut video-id ke nilai parameter URL v untuk video.
Misalnya, untuk menyematkan video YouTube "Your First Script - Apps Script Tutorials" yang dapat Anda temukan di https://www.youtube.com/watch?v=Pgfbl_o9WvM, tambahkan elemen kustom <devsite-video> berikut ke halaman DevSite Anda:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Kemudian, gabungkan elemen kustom <devsite-video> dalam elemen <div> yang atribut class-nya ditetapkan ke salah satu nilai di bawah:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Default
Contoh berikut menunjukkan cara video YouTube tersemat ditampilkan saat <devsite-video> digabungkan dalam elemen <div> yang atribut class-nya ditetapkan ke video-wrapper.
Pada perangkat layar besar, video memiliki lebar 50% dari area konten dan mengambang di sebelah kanan konten apa pun yang didahului oleh video. Pada layar kecil, video memiliki lebar 100% dari area konten.
Kode
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Mengambang ke kiri
Contoh berikut menunjukkan cara video YouTube tersemat ditampilkan saat <devsite-video> digabungkan dalam elemen <div> yang atribut class-nya ditetapkan ke video-wrapper-left.
Pada layar besar, video memiliki lebar 50% dari area konten dan mengambang di sebelah kiri konten apa pun yang didahului oleh video. Pada layar kecil, video memiliki lebar 100% dari area konten.
Kode
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Lebar penuh
Contoh berikut menunjukkan cara video YouTube tersemat ditampilkan saat <devsite-video> digabungkan dalam elemen <div> yang atribut class-nya ditetapkan ke video-wrapper-full-width.
Video memiliki lebar 100% dari area konten dan tidak memengaruhi tata letak konten apa pun yang didahului oleh video.
Kode
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Catatan
Semua contoh kode menggunakan widget YouTube yang disematkan di DevSite, yang melacak data Google Analytics secara otomatis. Kecuali untuk kasus khusus saat Anda tidak ingin mengumpulkan statistik penggunaan untuk video yang disematkan, gunakan widget ini. Tanpanya, statistik penggunaan untuk video Anda tidak akan dikirim ke Analytics.