Hướng dẫn nhúng video youtube bằng IFrame Player API tự động play cực đẹp cho Blog/Website

Việc chèn video được lấy từ  youtube bằng cách lấy mã nhúng. Khi chèn vào Blog sẽ nhìn không được đẹp và thu hút người xem vào Blog của bạn. Đặc biệt, đối với những bạn cần muốn play nhiều video random tự động phát video khi có người vào blog của bạn. Thì bài viết này rất hữu ích với các bạn:




☼ Đối với Blogger:

+Bước 1: Bạn vào https://www.blogger.com, vào Bố cục, nhấp chọn thêm tiện ích HTML/JavaScript tại vị trí bạn muốn phát video.

  Sao chép và dán đoạn code bên dưới vào trong khung tiện ích HTML/JavaScript vừa thêm:






               Hình ảnh minh họa sau khi chèn

<div id="player"></div>

<script>

(function(window, document, undefined) {

    'use strict';

    function removeElement(array, element) {

        return array.filter(function(el) {

            return el !== element

        });

    }

    function changeVideo() {

        if (player.getCurrentTime() >= delay) {

            var currentVideo = player.getVideoData().video_id,

                randomVideo = removeElement(videoPlaylist, currentVideo)[Math.floor(Math.random() * (videoPlaylist.length - 1))];

            player.loadVideoById(randomVideo);

        }

    }

    function onPlayerStateChange(event) {

        clearInterval(repeat);

        if (event.data === 1) {

            repeat = setInterval(changeVideo, 500);

        }

    }

    window.onYouTubeIframeAPIReady = function() {

        var randomVideo = videoPlaylist[Math.floor(Math.random() * videoPlaylist.length)];

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

            height: '180',

            width: '100%',

            videoId: randomVideo,

            playerVars: {

                'autoplay': 1,

                'controls': 0,

                'showinfo': 0,

                'iv_load_policy': 3

            },

            events: {

                'onStateChange': onPlayerStateChange

            }

        });

    }

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

        player,

        videoPlaylist = ['F7ak1kDrloY', 'hWGDaaKI_Hw', 'j9dk8R7qusU'],

        delay = 10, // s

        repeat;

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

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

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

})(window, document);

</script>

+Bước 2: tìm kiếm dòng code sau trong khung vừa thêm ở bước 1:
   videoPlaylist = ['F7ak1kDrloY', 'hWGDaaKI_Hw', 'j9dk8R7qusU'],
    ☼☼ Với ba dòng màu xanh dương: F7ak1kDrloY, hWGDaaKI_Hw, j9dk8R7qusU  chính là 3 id của 3 video. Muốn thêm bao nhiêu video thì bạn chỉ cần thêm dòng 'id video' vào khung [] là xong.

    ☼☼ Với dòng chữ màu xanh là ID video từ youtube
     - Cách lấy ID video. Ví dụ 1 video có link sau: https://www.youtube.com/watch?v=J4jYUm70KaA
    thì địa chỉ màu xanh dương chính là id video

☼ Đối với Website:
Các bạn sao chép đoạn code trên và sửa thành id video bạn muốn tự phát random vào vị trí mà bạn cần đặt video.

Lưu lại và kiểm tra thành quả nhé !

   Cảm ơn các bạn đã xem bài viết. Mọi thắc mắc liên quan các bạn vui lòng comment bên dưới để trao đổi nhé !
 ( Lưu ý khi sao chép vui lòng ghi rõ nguồn trang thoandroid.ga).