Hướng dẫn thiết kế Blog YouTube video sử dụng API key

Bài này mình chỉ viết khái quát cách nhúng video và sử dụng id của video cùng API key để lấy thông tin của video đó trên YouTube. Còn cách thiết kế bố cục như thế nào bạn có thể tham khảo thêm trên mạng hoặc trong chuyên mục Thiết kế Blogspot của Blog mình. Blog video mình làm mẫu các bạn tham khảo: https://viettubenet.blogspot.com/

Đã là thiết kế bạn phải thiết kế tối ưu làm sao cho nó đơn giản nhất với người sử dụng khi đăng bài viết. Bài viết mình chia làm 4 phần như sau:

1. Nhúng video
2. Get API key
3. Tạo Script lấy thông tin
4. Lấy ảnh bài viết ra trang index

Phần 1: Nhúng video

Có 4 vấn đề bạn cần quan tâm

- Trong bài đăng bắt buộc phải có iframe chứa link nhúng video để khi xuất bản có thể lấy được ảnh video ngoài trang index, link ảnh meta và link ảnh trong feed sử dụng làm bài viết liên quan, bài viết mới theo nhãn.

- Video phải tự động play khi tải trang

- id của video sử dụng trong script để lấy thông tin video, id này có thể sử dụng thẻ data gọi dữ liệu nếu widget Blog1 version 1 sử dụng thẻ data <data:post.snippet/> còn nếu trong widget Blog1 version 2 sử dụng thẻ data <b:eval expr='data:post.body snippet { length: 100, links: false, linebreaks: false, ellipsis: false }'/>

Tổng hợp lại khi đăng bài viết sử dụng đoạn code bắt buộc như sau:

<div class='snippet'>id video</div>
<iframe id="player" allow="autoplay" src="https://www.youtube.com/embed/id video"></iframe>

Đoạn id video mình đánh dấu màu đỏ được lấy từ link video trên YouTube ví dụ link xem video có dạng https://www.youtube.com/watch?v=x-UEksXSLGs thì x-UEksXSLGs là id video thay vào đoạn mã trên ta được:

<div class='snippet'>x-UEksXSLGs</div>
<iframe id="player" allow="autoplay" src="https://www.youtube.com/embed/x-UEksXSLGs"></iframe>

Hình minh họa khi đăng bài viết chèn mã bên khung HTML

- Video phải reponsive với tất cả kích thước màn hình điều đó bạn có thể thiết kế css như sau:

Copy

 .video-container {

    position: relative;

    padding-bottom: 56.25%;

}

.video-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

. snippet {

    display:none!important;

}

Sau đó bạn đặt class video-container trước thẻ data <data:post.body/> như sau:

Copy

<div class='video-container'>

  <data:post.body/>

</div>

Phần 2: Get API key

Đầu tiên bạn truy cập link https://console.developers.google.com/ có giao diện như hình sau:

Bạn tích vào các ô Yes sau đó chọn ACCEPT chấp thuận điều khoản sử dụng. Tiếp theo bạn cần tạo Project trên góc phải

Khi tạo xong bạn cần kích hoạt thư viện API tên YouTube Data API v3

Khi kích hoạt xong ở bước cuối tạo API key

API key được tạo tự động và có thể thay đổi được bằng RESTRICT KEY

Ví dụ khi tạo xong ta có key là AIzaSyCd7NXRblaJiHEhj8TXzRmZxr3gkpNCBZ8 và key này có thể sử dụng get cho nhiều tài khoản và nhiều Blog khác nhau nhưng bạn phải quản lý key này không được xóa vì nếu xóa tất cả các Blog sử dụng key này đều không thề get video được.

Phần 3: Tạo Script lấy thông tin

Đầu tiên bạn đăng ký một thẻ tag b:includable chứa script trong widget Blog 1 để sau này thuận tiện cho việc chỉnh sửa, với widget Blog1 v1 chèn ngay sau thẻ tag <b:includable id='main' var='top'>...</b:includable> còn nếu widget Blog1 v2 chèn ngay sau thẻ tag <b:includable id='main'>...</b:includable>

Copy

<b:includable id='YouTube'>

  <b:if cond='data:view.isPost'>

    <script>

    // Viết script trong này

    </script>

  </b:if>

</b:includable>

Tiếp tục đặt thẻ tag <b:include name='YouTube'/> dưới cùng trong thẻ tag <b:includable id='post' var='post'>...</b:includable>

Copy

<b:includable id='post' var='post'>

  ...

  <b:include name='YouTube'/>

</b:includable>

Bây giờ chúng ta bắt đầu viết script nhưng trước hết mình giới thiệu qua về cách get của một id video sử dụng API key, mẫu tham khảo như sau:

https://www.googleapis.com/youtube/v3/videos?id=x-UEksXSLGs&key=AIzaSyCd7NXRblaJiHEhj8TXzRmZxr3gkpNCBZ8&part=snippet,statistics

Với x-UEksXSLGs là id video và AIzaSyCd7NXRblaJiHEhj8TXzRmZxr3gkpNCBZ8 là API key mà mình vừa mới tạo ở phần 2.

Khi sử dụng link này trên trình duyệt ta được hình mô tả như dưới:

Như vậy từ link get này ta có thể lấy được thông tin như: Ngày xuất bản (publishedAt), id của kênh (channelId), Tiều đề video (title), mô tả video (description), link ảnh, tên kênh (channelTitle), lượt xem (viewCount), lượt thích (likeCount), không thích (dislikeCount), tồng số nhận xét (commentCount)...

Bây giờ chúng ta sẽ tạo script như sau:

+ Tạo script để video tự động play khi tải trang

Copy

var id = '<b:eval expr='data: post.body snippet { length: 100, links: false, linebreaks: false, ellipsis: false }'/>'; // Lấy id video từ bài đăng trong Phần 1

var iframe = 'https://www.youtube.com/embed/' + id + '?loop=1&amp;rel=0&amp;fs=1&amp;showinfo=0&amp;cc_load_policy=1&amp;iv_load_policy=3&amp;modestbranding=1&enablejsapi=1';

$('#player').attr('frameborder', '0').attr('allowfullscreen', '1').attr('allow', 'autoplay').attr('src', (iframe));

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {

    player = new YT.Player('player', {

        events: {

            'onReady': onPlayerReady

        }

    });

}

function onPlayerReady(event) {

    event.target.playVideo();

}

+ Tạo script lấy thông tin

Copy

var key = 'AIzaSyCd7NXRblaJiHEhj8TXzRmZxr3gkpNCBZ8'; // lấy trong Phần 2

$.ajax({

    url: 'https://www.googleapis.com/youtube/v3/videos?id=' + id + '&key=' + key + '&part=snippet,statistics',

    type: 'get',

    dataType: 'json',

    success: function(data) {

        var w = ' thag ';

        var x = ', ';

        var t = data.items[0].snippet.publishedAt;

        var publishedAt = t.substring(8, 10) + w + t.substring(5, 7) + x + t.substring(0, 4); // ngày xuất bản

        var channelId = data.items[0].snippet.channelId; // id kênh

        var channel = 'https://www.youtube.com/channel/' + channelId; // link kênh

        var subscribe = 'https://www.youtube.com/channel/' + channelId + '?sub_confirmation=1'; // link đăng ký kênh

        var title = data.items[0].snippet.title; // tiêu đề video

        var description = data.items[0].snippet.description; // mô tả video

        var channelTitle = data.items[0].snippet.channelTitle; // tên kênh

        var viewCount = data.items[0].statistics.viewCount; // lượt xem video

        var numviewCount = parseInt(viewCount).toLocaleString(); // định dạng lượt xem video

        var likeCount = data.items[0].statistics.likeCount; // số lượt thích video

        var dislikeCount = data.items[0].statistics.dislikeCount; // số lượt không thích video

        function nFormatter(likeCount) { // định dạng lượt thích video

            if (likeCount >= 1000000000) {

                return (likeCount / 1000000000).toFixed(1).replace(/\.0$/, '') + ' T';

            }

            if (likeCount >= 1000000) {

                return (likeCount / 1000000).toFixed(1).replace(/\.0$/, '') + ' TR';

            }

            if (likeCount >= 1000) {

                return (likeCount / 1000).toFixed(1).replace(/\.0$/, '') + ' N';

            }

            return likeCount;

        }

        function nFormatter(dislikeCount) { // định dạng lượt không thích video

            if (dislikeCount >= 1000000000) {

                return (dislikeCount / 1000000000).toFixed(1).replace(/\.0$/, '') + ' T';

            }

            if (dislikeCount >= 1000000) {

                return (dislikeCount / 1000000).toFixed(1).replace(/\.0$/, '') + ' TR';

            }

            if (dislikeCount >= 1000) {

                return (dislikeCount / 1000).toFixed(1).replace(/\.0$/, '') + ' N';

            }

            return dislikeCount;

        }

        $('.video_published').html(publishedAt); // hiển thị ngày xuất bản

        $('.video_title').html(title); // hiển thị tiêu đề video

        $('.video_description').html(description); // hiển thị mô tả video

        $('.channel_Title').html(channelTitle); // hiển thị tên kênh

        $('.channel').attr('href', (channel)).attr('title', (channelTitle)); // Add link kênh vào tên kênh

        $('.subscribe').attr('href', (subscribe)); // Add link đăng ký vào nút Đăng ký kênh    

        $('.view_count').html(numviewCount); // hiển thị lượt xem video

        $('.like_count').html(nFormatter(likeCount)); // hiển thị lượt thích video

        $('.dislike_count').html(nFormatter(dislikeCount)); // hiển thị lượt không thích video

        $.ajax({

            url: 'https://www.googleapis.com/youtube/v3/channels?id=' + channelId + '&key=' + key + '&part=snippet,statistics', // link sử dụng get lấy thông tin kênh

            type: 'get',

            dataType: 'json',

            success: function(data) {

                var userphoto = data.items[0].snippet.thumbnails.default.url; // link ảnh của kênh

                var subscriberCount = data.items[0].statistics.subscriberCount; // số lượt đăng ký kênh

                function nFormatter(subscriberCount) { // định dạng số lượt đăng ký kênh

                    if (subscriberCount >= 1000000000) {

                        return (subscriberCount / 1000000000).toFixed(1).replace(/\.0$/, '') + ' T';

                    }

                    if (subscriberCount >= 1000000) {

                        return (subscriberCount / 1000000).toFixed(1).replace(/\.0$/, '') + ' TR';

                    }

                    if (subscriberCount >= 1000) {

                        return (subscriberCount / 1000).toFixed(1).replace(/\.0$/, '') + ' N';

                    }

                    return subscriberCount;

                }

                $('#img').attr('src', (userphoto)).attr('title', (channelTitle)); // hiển thị ảnh của kênh

                $('.subscriber_Count').html(nFormatter(subscriberCount)); // hiển thị lượt đăng ký

            }

        });

    }

});

+ Đặt Html hiển thị ngay dưới post-body thường là trong post-footer

Copy

<h1 class="video_title"></h1> // tiêu đề video

<span class="view_count"></span> // lượt xem

<span class="view_count"></span> // lượt thích

<span class="dislike_count"></span> // không thích

<span class="post-author">

<img id="img"> // ảnh kênh

<a class="channel" target="_blank"> // link kênh

<span class="channel_Title"></span> // tên kênh

</a>

</span>

<span class="video_published"></span> // ngày xuất bản

<div class="subscribe_button">

<a class="subscribe" target="_blank" > // link đăng ký kênh

<span class="subscriber_Count"></span> // lượt theo dõi kênh

</a>

</div>

<div class="video_description"></div> // mô tả video

Phần 4: Lấy ảnh bài viết ra trang index

Đặt tag img như sau:

Copy

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.featuredImage,500,&quot;2:1&quot;)'/>

Chấm hết bài!!!

Nội dung chính