Tạo Youtube Playlist cho Web, blogger, blogspot.
Thêm Youtube Playlist cho blogspot là một thủ thuật khá hữu ích dành cho các bạn thích chèn bộ list trên Youtube của Website. Một bộ phim, một video trên youtube cũng giúp Web bạn có nhiều người đọc hơn.
Mọi người có thể thấy demo ngay tại trang chủ. Đây là một style mình tham khảo từ trang nước ngoài.
Bạn thấy đó, có thể xem trực tiếp video Youtube, hiển thị Current Play (Video đang xem). Và điều đặc biệt là dễ dàng chỉnh sửa.
Chúng ta cùng bắt đầu ngay với thủ thuật này.
Đầu tiên là CSS. Bạn thêm vào trước ]]></skin>
Tiếp theo là Javascript/jquery. Bạn thêm vào sau <head> hoặc trước </head>
Và cuối cùng là html thêm vào nơi bạn muốn thêm:
Chỉnh sửa video cho phù hợp với web của bạn.
Bạn cũng có thể thêm vào tiện ích Widget để dễ dàng chỉnh sửa. Bài sau mình sẽ hướng dẫn cách tạo tiện ích cho blogger. Cảm ơn mọi người đã quan tâm.
Thêm Youtube Playlist cho blogspot là một thủ thuật khá hữu ích dành cho các bạn thích chèn bộ list trên Youtube của Website. Một bộ phim, một video trên youtube cũng giúp Web bạn có nhiều người đọc hơn.
Mọi người có thể thấy demo ngay tại trang chủ. Đây là một style mình tham khảo từ trang nước ngoài.
Bạn thấy đó, có thể xem trực tiếp video Youtube, hiển thị Current Play (Video đang xem). Và điều đặc biệt là dễ dàng chỉnh sửa.
Chúng ta cùng bắt đầu ngay với thủ thuật này.
Đầu tiên là CSS. Bạn thêm vào trước ]]></skin>
/*youtube playlist*/
.youtube {
background: #f9f9f9;
padding: 5px;
max-width:350px;
max-height:255px;
float: left;
}
.youtube ul {
float: left;
margin: 0;
padding: 0;
width: 220px;
}
.youtube ul li {
list-style-type: none;
display:block;
background: #f1f1f1;
float: left;
width: 170px;
padding-bottom: 10px;
padding:2px;
}
.demo1 li
{
padding:5px 0px !important;
}
.youtube ul li img {
width: 120px;
float: left;
margin-right: 5px;
border: 1px solid #999;
}
.youtube ul li a {
font-family: georgia;
text-decoration: none;
display: block;
color: #000;
}
.currentvideo {
background: #e6e6e6;
}
Tiếp theo là Javascript/jquery. Bạn thêm vào sau <head> hoặc trước </head>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
<!-- Youtube playlist-->
<script type='text/javascript'>
//<![CDATA[
/**
*/
jQuery(function() {
var pluginName = 'ytplaylist';
var defaults = {
holderId: 'ytvideo',
playerHeight: 190,
playerWidth: 345,
addThumbs: false,
thumbSize: 'small',
showInline: false,
autoPlay: true,
showRelated: true,
allowFullScreen: false,
deepLinks: false,
onChange: function(){},
start: 1,
secure: 'auto' //false|true|'auto'
};
/**
* Get a youtube id from a url
*
* @param {String} url Url to youtube video.
* @return {String|Null} Id of video, or null if none found.
*/
function youtubeid(rl) {
var id = null;
if (url.indexOf('//www.youtube.com') !== -1) {
id = url.match("[\\?&]v=([^&#]*)")[1];
}
else if (url.indexOf('//youtu.be') !== -1){
id = url.substr(url.lastIndexOf("/") + 1);
}
return id;
}
/**
* Main plugin contstructor
*
* @param {Object} element object representing UL element.
* @param {Object} options Options object.
*/
function Plugin(element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this._protocol = (this.options.secure === 'auto') ? window.location.protocol === 'https:' ? 'https://' : 'http://' :
this.options.secure ? 'https://' : 'http://';
this._autoPlay = (this.options.autoPlay) ? '&autoplay=1' : '';
this._showRelated = (this.options.showRelated) ? '&rel=1' : '';
this._fullscreen = (this.options.allowfullscreen) ? '&fs=1' : '';
this.init();
}
Plugin.prototype = {
/**
* Initialise gallery
*
* Loop through <li> elements, setting up click
* handlers etc.
*/
init: function() {
var self = this;
var initialItem = self.options.deepLinks && window.location.hash.indexOf('#yt-gal-') !== -1 ? window.location.hash : null;
// Setup initial classification of content
$(self.element).find('li').each(function(index) {
var listItem = $(this);
var listIndex = index + 1;
listItem.find('a:first').each(function() {
var link = $(this);
var ytid = youtubeid(link.attr('href'));
var replacedText = listItem.text();
link.data('yt-href', link.attr('href'));
link.attr('href', '#yt-gal-' + listIndex);
if (ytid) {
link.addClass('yt-vid');
link.data('yt-id', ytid);
if (self.options.addThumbs) {
if(self.options.thumbSize == 'small') {
thumbUrl = self._protocol + 'img.youtube.com/vi/' + ytid + '/2.jpg';
}
else {
thumbUrl = self._protocol + 'img.youtube.com/vi/' + ytid + '/0.jpg';
}
var thumbHtml = '<img src="' + thumbUrl + '" alt="' + replacedText + '" />';
link.empty().html(thumbHtml + replacedText).attr('title', replacedText);
}
}
else {
//must be an image link (naive)
link.addClass('img-link');
if (self.options.addThumbs) {
var $img = $('<img/>').attr('src', link.data('yt-href'));
link.empty().html($img).attr("title", replacedText);
}
}
if (!self.options.deepLinks) {
link.click(function(e) {
e.preventDefault();
self.handleClick(link, self.options);
self.options.onChange.call();
});
}
});
var firstLink = $(listItem.children('a')[0]);
if (initialItem) {
if (firstLink.attr('href') === initialItem) {
self.handleClick(firstLink, self.options);
}
}
else if (listIndex === self.options.start) {
self.handleClick(firstLink, self.options);
}
});
if (self.options.deepLinks) {
$(window).bind('hashchange', function(e) {
var hash = window.location.hash;
var clicked = $(self.element).find('a[href="' + hash + '"]');
if (clicked.length > 0) {
self.handleClick(clicked, self.options);
}
else if (hash === '') {
self.handleClick($(self.element).find('a:first'), self.options);
}
});
}
},
/**
* Get old-style youtube embed code
*
* @param {Object} options Plugin options object.
* @param {String} id ID of youtube video.
* @return {String} HTML embed code.
*/
getOldEmbedCode: function(options, id) {
//throw a youtube player in
var html = '';
html += '<object height="' + options.playerHeight + '" width="' + options.playerWidth + '">';
html += '<param name="movie" value="' + this._protocol + 'www.youtube.com/v/' + id + this._autoPlay + this._showRelated + this._fullScreen + '"> </param>';
html += '<param name="wmode" value="transparent"> </param>';
if(options.allowFullScreen) {
html += '<param name="allowfullscreen" value="true"> </param>';
}
html += '<embed src="' + this._protocol + 'www.youtube.com/v/' + id + this._autoPlay + this._showRelated + this._fullScreen + '"';
if(options.allowFullScreen) {
html += ' allowfullscreen="true" ';
}
html += 'type="application/x-shockwave-flash" wmode="transparent" height="' + options.playerHeight + '" width="' + options.playerWidth + '"></embed>';
html += '</object>';
return html;
},
/**
* Get new-style youtube embed code
*
* @param {Object} options Plugin options object.
* @param {String} id ID of youtube video.
* @return {String} HTML embed code.
*/
getNewEmbedCode: function(options, id) {
var html = '';
html += '<iframe width="' + options.playerWidth + '" height="' + options.playerHeight + '"';
html += ' src="' + this._protocol + 'www.youtube.com/embed/' + id + '?wmode=opaque' + this._showRelated + '" frameborder="0"';
html += ' allowfullscreen></iframe>';
return html;
},
/**
* Handle clicks on all items
*
* @param {Object} link jQuery object representing clicked link.
* @param {Object} options Plugin options object.
* @return {Function} Appropriate handler function.
*/
handleClick: function(link, options) {
if (link.hasClass('yt-vid')) {
return this.handleVideoClick(link, options);
}
else {
return this.handleImageClick(link, options);
}
},
/**
* Handle clicks on video items
*
* @param {Object} link jQuery object representing clicked link.
* @param {Object} options Plugin options object.
* @return {Boolean} False, cancelling click event.
*/
handleVideoClick: function(link, options) {
var self = this;
if(options.showInline) {
$('li.currentvideo').removeClass('currentvideo');
link.parent('li').addClass('currentvideo').html(self.getNewEmbedCode(self.options, link.data('yt-id')));
}
else {
var holder = (options.holder ? options.holder : $('#' + options.holderId));
holder.html(self.getNewEmbedCode(self.options, link.data('yt-id')));
link.parent().parent('ul').find('li.currentvideo').removeClass('currentvideo');
link.parent('li').addClass('currentvideo');
}
return false;
},
/**
* Handle clicks on image items
*
* @param {Object} link jQuery object representing clicked link.
* @param {Object} options Plugin options object.
* @return {Boolean} False, cancelling click event.
*/
handleImageClick: function(link, options) {
var thisImage = new Image();
var $thisImage = $(thisImage);
var $link = $(link);
thisImage.onload = function() {
if ($thisImage.height() < $thisImage.width()) {
$thisImage.width(options.playerWidth).css('margin-top',parseInt($thisImage.height()/-2, 10)).css({
height: 'auto'
});
}
else {
$thisImage.css({
height: options.playerHeight,
width: 'auto',
top: '0px',
position: 'relative'
});
}
$thisImage.fadeIn();
};
$thisImage.attr({src:$link.data('yt-href') })
.css({
display: 'none',
position: 'absolute',
left: '0px',
top: '50%'});
if(options.showInline) {
$('li.currentvideo').removeClass('currentvideo');
$link.parent('li').addClass('currentvideo').html($thisImage);
}
else {
var holder = (options.holder ? options.holder : $('#' + options.holderId));
holder.html($thisImage);
$link.closest('ul').find('li.currentvideo').removeClass('currentvideo');
$link.parent('li').addClass('currentvideo');
}
return false;
}
};
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName,
new Plugin(this, options));
}
});
};
})(jQuery);
//]]>
</script>
<script type='text/ecmascript'>
$(function() {
var holder = $('div.youtube');
$("ul.demo1").ytplaylist({holder: holder});
});
</script>
Và cuối cùng là html thêm vào nơi bạn muốn thêm:
<div class='youtube'>Waiting Video from Youtube...</div>
<div>
<ul class='demo1'>
<li><a href='http://www.youtube.com/watch?v=QBBWKvY-VDc'>Video 1</a></li>
<li><a href='http://www.youtube.com/watch?v=ZXMQqLnRhRI'>Video 2</a></li>
<li><a href='http://youtu.be/L0CsLefLisE'>Video 3</a></li>
</ul>
</div>
Chỉnh sửa video cho phù hợp với web của bạn.
Bạn cũng có thể thêm vào tiện ích Widget để dễ dàng chỉnh sửa. Bài sau mình sẽ hướng dẫn cách tạo tiện ích cho blogger. Cảm ơn mọi người đã quan tâm.
- Rất vui khi được mọi người nhận xét, đóng góp ý kiến để bài viết chất lượng hơn.
- Các ý kiến mang nội dung xấu, tính chất spam, chia rẽ, vi phạm sẽ bị xóa mà không nhắc nhở.
- Comment và share bài viết nếu bạn cảm thấy hay và thú vị.
- Không quên ghi lại nguồn erhay khi bạn phát hành lại thông tin từ trang này.