cách nhúng kênh youtube vào website hoặc blog

Cách nhúng toàn bộ 1 kênh youtube vào website hoặc blog

Ở bài hướng dẫn trước, chúng tôi có giới thiệu cách nhúng toàn bộ kênh youtube vào website /blog theo cách truyền thống. Nhưng hôm nay, chúng tôi thấy trên internet có một số trang hỗ trợ bạn thực hiện điều này hiệu quả hơn, nên chúng tôi xin được giới thiệu tới quý vị. Ví dụ như những trang sau:

Demo

Trang thứ nhất

Trang thứ hai   

Trang thứ ba

Nhưng Giáo xứ Lộc Thủy lại thích kiểu NÀY HƠN! (xem ảnh demo, hoặc xem demo thực tế TẠI ĐÂY

->> Tất cả những gì bạn cần làm là copy và dán đoạn code này vào bài đăng của bạn (nhớ đặt ở chế độ "HTML" nha:

<stlyle>
#player{ width:348px;  height:240px;  overflow:hidden;  background:gray;  position:relative;  border:solid 2px gray}

.youtube .carousel{ width:20%;  height:100%;  overflow:auto;  position:absolute;  right:0px;  z-index:3}

.youtube .thumbnail{ margin:2px;  width:80%;  border:1px solid black}

.youtube iframe.player{ width:80%;  height:240px;    border:0}

</style>

<div id="player">
<script type="text/javascript">/*
/*
Copyright 2011 : Simone Gianni <simoneg@apache.org>

Released under The Apache License 2.0 
http://www.apache.org/licenses/LICENSE-2.0

*/

(function() {
    function createPlayer(jqe, video, options) {
        var ifr = $('iframe', jqe);
        if (ifr.length === 0) {
            ifr = $('<iframe scrolling="no">');
            ifr.addClass('player');
        }
        var src = 'http://www.youtube.com/embed/' + video.id;
        if (options.playopts) {
            src += '?';
            for (var k in options.playopts) {
                src+= k + '=' + options.playopts[k] + '&';
            }  
            src += '_a=b';
        }
        ifr.attr('src', src);
        jqe.append(ifr);  
    }
    
    function createCarousel(jqe, videos, options) {
        var car = $('div.carousel', jqe);
        if (car.length === 0) {
            car = $('<div>
');
            car.addClass('carousel');
            jqe.append(car);
            
        }
        $.each(videos, function(i,video) {
            options.thumbnail(car, video, options); 
        });
    }
    
    function createThumbnail(jqe, video, options) {
        var imgurl = video.thumbnails[0].url;
        var img = $('img[src="' + imgurl + '"]');
        if (img.length !== 0) return;
        img = $('<img>');    
        img.addClass('thumbnail');
        jqe.append(img);
        img.attr('src', imgurl);
        img.attr('title', video.title);
        img.click(function() {
            options.player(options.maindiv, video, $.extend(true,{},options,{playopts:{autoplay:1}}));
        });
    }
    
    var defoptions = {
        autoplay: false,
        user: null,
        carousel: createCarousel,
        player: createPlayer,
        thumbnail: createThumbnail,
        loaded: function() {},
        playopts: {
            autoplay: 0,
            egm: 1,
            autohide: 1,
            fs: 1,
            showinfo: 0
        }
    };
    
    
    $.fn.extend({
        youTubeChannel: function(options) {
            var md = $(this);
            md.addClass('youtube');
            md.addClass('youtube-channel');
            var allopts = $.extend(true, {}, defoptions, options);
            allopts.maindiv = md;
            $.getJSON('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&callback=?', null, function(data) {
                var feed = data.feed;
                var videos = [];
                $.each(feed.entry, function(i, entry) {
                    var video = {
                        title: entry.title.$t,
                        id: entry.id.$t.match('[^/]*$'),
                        thumbnails: entry.media$group.media$thumbnail
                    };
                    videos.push(video);
                });
                allopts.allvideos = videos;
                allopts.carousel(md, videos, allopts);
                allopts.player(md, videos[0], allopts);
                allopts.loaded(videos, allopts);
            });
        } 
    });
    
})();
        
$(function() {
    $('#player').youTubeChannel({user:'gioitrelocthuy'});
});</script></div>

Chú thích: 1.  thay gioitrelocthuy bằng tên kênh youtube bất kỳ mà bạn muốn chèn.

                  2. Thay đổi độ rộng và cao cho phù hợp với website hoặc blog của bạn nhé!

Chúc bạn thành công.