Trang chủ
Blogspot Tips

Hướng dẫn thêm thêm video Youtube trong AMP

Việc chuẩn bị đầu tiên trước khi hiển thị video Youtube trên các trang AMP là bạn phải thêm thư viện amp-youtube JS trên blog của mình. Để làm cho nó gọn gàng hơn, chúng tôi đã thu thập tất cả các thư viện JS theo nhóm <!-- Google AMP JavaScript --> hãy tìm mã trong <head> blog của bạn.

<script async custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-1.0.js'/>

Thêm video Youtube vào trang AMP

Sao chép ID video bạn muốn hiển thị. Để lấy nó, hãy kiểm tra url của video:

youtube.com/watch?v=xxxxxxxxxxx

Dán ID video bạn có vào thẻ bên dưới:

<amp-youtube data-videoid='xxxxxxxxxxx' layout='responsive' width='480' height='270'></amp-youtube>

Các bố cục được hỗ trợ cho thẻ này là: fill , fixed, fixed-height, nodisplay và responsive. Với bố cục đáp ứng, chiều rộng và chiều cao trong ví dụ trên sẽ dẫn đến video có bố cục phù hợp với tỷ lệ khung hình là 16:9.

Tính năng Play

Cài đặt tự động phát sẽ tự động phát / tạm dừng video khi trang được cuộn vào / ra trên một số màn hình trình duyệt nhất định, video sẽ tự động bị tắt tiếng khi tự động phát bắt đầu và âm thanh sẽ xuất hiện khi người dùng nhấp / nhấn vào video.

Tính năng này có thể không được hỗ trợ trên các trình duyệt cũ hơn, nhưng nếu bạn muốn dùng thử, vui lòng thêm thuộc tính autoplay='autoplay' vào thẻ <amp-youtube> ví dụ:

<amp-youtube autoplay='autoplay' data-videoid='xxxxxxxxxxx' layout='responsive' width='480' height='270'></amp-youtube>

Bạn có thể đọc trên trang web chính thức để tìm hiểu thêm về amp-youtube.

Truy cập Bypass Google Account APK để tải file APK nhé