Bạn có thể nhúng video trên YouTube trực tiếp vào các trang DevSite bằng phần tử tuỳ chỉnh <devsite-video>. Tất cả video đều thích ứng và duy trì tỷ lệ 16:9 khi chiều rộng khung nhìn thay đổi.
Để nhúng video trên YouTube, hãy thêm một phần tử tuỳ chỉnh <devsite-video> vào trang của bạn và đặt thuộc tính video-id thành giá trị của tham số URL v cho video đó.
Ví dụ: để nhúng video trên YouTube "Your First Script - Apps Script Tutorials" (Tập lệnh đầu tiên của bạn – Hướng dẫn về Apps Script) mà bạn có thể xem tại https://www.youtube.com/watch?v=Pgfbl_o9WvM, hãy thêm phần tử tuỳ chỉnh <devsite-video> sau đây vào trang DevSite:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Sau đó, gói phần tử tuỳ chỉnh <devsite-video> trong phần tử <div> có thuộc tính class được đặt thành một trong các giá trị bên dưới:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Mặc định
Ví dụ sau đây cho thấy cách hiển thị video được nhúng trên YouTube khi <devsite-video> được gói trong phần tử <div> có thuộc tính class được đặt thành video-wrapper.
Trên màn hình lớn, video chiếm 50% chiều rộng của khu vực nội dung và nổi ở bên phải của mọi nội dung đi trước video. Trên màn hình nhỏ, video chiếm 100% chiều rộng của vùng nội dung.
Mã
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Bản minh hoạ
Nổi sang trái
Ví dụ sau đây cho thấy cách hiển thị video được nhúng trên YouTube khi <devsite-video> được gói trong phần tử <div> có thuộc tính lớp được đặt thành video-wrapper-left.
Trên màn hình lớn, video chiếm 50% chiều rộng của vùng nội dung và nổi ở bên trái của mọi nội dung mà video đó đi trước. Trên màn hình nhỏ, video chiếm 100% chiều rộng của vùng nội dung.
Mã
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Bản minh hoạ
Toàn chiều rộng
Ví dụ sau đây cho thấy cách hiển thị video được nhúng trên YouTube khi <devsite-video> được gói trong phần tử <div> có thuộc tính class được đặt thành video-wrapper-full-width.
Video chiếm 100% chiều rộng của khu vực nội dung và không ảnh hưởng đến bố cục của bất kỳ nội dung nào trước video.
Mã
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Bản minh hoạ
Ghi chú
Tất cả ví dụ về mã đều sử dụng Tiện ích nhúng YouTube của DevSite. Tiện ích này sẽ tự động theo dõi dữ liệu Google Analytics. Hãy sử dụng tiện ích này, trừ các trường hợp đặc biệt mà bạn không muốn thu thập số liệu thống kê về mức sử dụng cho một video được nhúng. Nếu không, số liệu thống kê về việc sử dụng video của bạn sẽ không được gửi đến Analytics.