| Adding Youtube video playlist to blog post Posted: 07 Apr 2014 08:52 AM PDT If you've ever work with Youtube, you might know that Youtube allows user to embed a video playlist in another website. But what happen if you want to collect videos from many Youtube accounts and play it in your blog as a playlist? This tutorial gonna shows you how to do this. If you have a video blog or a movie online website, I think this tip will work for you. DemoInstallation1. This tutorial use Jquery Youtube Tubeplayer Plugin to show video playlist, so you have to make sure Jquery frameworks installed in your Blogger template. Without Jquery framework, Jquery Youtube Tubeplayer plugin can not works. First, open template file by going to Blogger Dashboard -> Template tab ->Edit HTML. Search whole template file for Jquery frameworks. Normally, Jquery frameworks is in a file name "jquery.min.js" or host in address "ajax.googleapis.com", so you only need to look for these term. If you find Jquery framework in your template, it means you don't need to add this frameworks to your template again. If not, you can add Jquery framework to your template simply by adding this code right before ]]></b:skin>: <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> 2. Copy and paste the following code right after </head>
<style>
.list-tube {
height: 400px;
position: relative;
}
.list-tube:nth-child(2n) {
margin-right: 0;
}
#playerVdo {
height: 400px;
}
.frame {
background: none repeat scroll 0 0 #000000;
height: 350px;
overflow: hidden;
position: relative;
width: 100%;
z-index: 0;
}
.frame .slidee {
background: none repeat scroll 0 0 rgb(255, 255, 255);
padding: 20px 25px;
}
.frame ul.items {
font-size: 100%;
list-style: none outside none;
margin: 0;
padding: 0;
width: 100%;
}
.frame ul.items li {
background: none repeat scroll 0 0 #000000;
border-left: 5px solid #000000;
border-top: 1px solid #2B2B2B;
color: #DDDDDD;
cursor: pointer;
float: left;
height: 50px;
margin: 0;
padding: 0;
width: 100%;
}
.frame ul.items li.active {
background: none repeat scroll 0 0 transparent;
border-left-color: rgb(213, 28, 24);
color: rgb(255, 255, 255);
}
.list-tube .scrollbar {
background: none repeat scroll 0 0 rgba(0, 0, 0,.8);
height: 250px;
line-height: 0;
overflow: hidden;
position: absolute;
right: 1px;
width: 20px;
z-index: 2;
}
.list-tube .scrollbar .handle {
background: none repeat scroll 0 0 rgb(255, 255, 255);
border-radius: 5px 5px 5px 5px;
cursor: pointer;
height: 100px;
margin-left: 5px;
width: 56%;
}
.list-tube .scrollbar .handle .mousearea {
height: 100%;
left: -10px;
position: absolute;
top: 0;
width: 22px;
}
.list-tube .pages {
list-style: none outside none;
margin: 20px 0;
padding: 0;
text-align: center;
}
.list-tube .pages li {
background: none repeat scroll 0 0 rgb(255, 255, 255);
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
cursor: pointer;
display: inline-block;
height: 14px;
margin: 0 4px;
overflow: hidden;
text-indent: -999px;
width: 14px;
}
.list-tube .pages li:hover {
background: none repeat scroll 0 0 rgb(170, 170, 170);
}
.list-tube .pages li.active {
background: none repeat scroll 0 0 rgb(102, 102, 102);
}
.list-tube .controls {
margin: 0;
text-align: center;
}
.list-tube .controls p {
margin: 0px;
padding: 0;
}
.list-tube button i {
font-size: 10px;
}
.list-tube button {
color: rgb(0, 0, 0);
opacity: 0.9;
}
.list-tube button:hover {
opacity: 1;
}
.list-tube button:disabled {
opacity: 0.2;
}
.list-tube .controls {
text-align: center;
background: none repeat scroll 0 0 #E8E8E8;
border: 1px solid #C9C9C9;
}
.list-tube .controls .divider {
display: inline-block;
margin: 0 10px;
}
.list-tube .controls button {
font-family: Novecento,sans-serif;
line-height: 25px;
vertical-align: middle;
font-size: 16px;
}
.list-tube .controls button i {
font-size: 11px;
vertical-align: middle;
}
.list-tube .controls button i.sma {
font-size: 22px;
}
.list-tube .items li a {
color: #FEFEFE;
display: block;
height: 50px;
padding: 0;
text-decoration: none;
}
.frame ul.items li.active a{
background: none repeat scroll 0 0 rgba(152, 50, 50, 0.5);
}
.list-tube .items li .thunalltube{
float: left;
height: 45px;
margin-right: 10px;
width: 70px;
}
.list-tube .items li img {
background: none repeat scroll 0 0 #000000;
margin-right:10px;
border: none;
float: left;
height: 43px;
width: 70px;
}
.list-tube .items li b {
color: #FFFFFF;
display: inline;
font-size: 13.5px;
line-height: 25px;
margin: 0;
padding: 0;
}
.list-tube .items li span {
display: block;
font-size: 12px;
line-height: 100%;
margin: 0;
opacity: 0.7;
padding: 0;
}
.btn-group{margin: 0 20px;}
.btn {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #FFFFFF;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15);
border-image: none;
border-style: solid;
border-width: 1px 1px 2px;
color: #333333;
cursor: pointer;
display: inline-block;
line-height: 30px;
margin-bottom: 0;
padding: 4px 12px;
position: relative;
text-align: center;
vertical-align: middle;
}
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
background-color: #F5F5F5;
color: #333333;
}
.btn:first-child {
}
.btn:hover {
color: #333333;
text-decoration: none;
}
.btn:focus {
outline: thin dotted #333333;
outline-offset: -2px;
}
.btn.active, .btn:active, .btn-group.open .btn {
border-bottom-width: 1px;
border-top-color: rgba(0, 0, 0, 0.2);
border-top-width: 2px;
box-shadow: 0 60px 0 rgba(0, 0, 0, 0.1) inset;
outline: 0 none;
top: 1px;
}
.btn.disabled, .btn[disabled] {
background-image: none;
cursor: default;
opacity: 0.65;
}
.btn-large {
font-size: 17.5px;
padding: 11px 19px;
}
.btn-large [class^="icon-"], .btn-large [class*=" icon-"] {
margin-top: 4px;
}
.btn-small {
font-size: 11.9px;
padding: 2px 10px;
}
.btn-small [class^="icon-"], .btn-small [class*=" icon-"] {
margin-top: 0;
}
.btn-mini [class^="icon-"], .btn-mini [class*=" icon-"] {
margin-top: -1px;
}
.btn-mini {
font-size: 10.5px;
padding: 0 6px;
}
.btn-block {
-moz-box-sizing: border-box;
display: block;
padding-left: 0;
padding-right: 0;
width: 100%;
}
.btn-block + .btn-block {
margin-top: 5px;
}
input.btn-block[type="submit"], input.btn-block[type="reset"], input.btn-block[type="button"] {
width: 100%;
}
.btn-primary {
background-color: #6B9FD6;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
background-color: #6190C2;
color: #FFFFFF;
}
.btn-info {
background-color: #47ABDD;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
background-color: #1695D1;
color: #FFFFFF;
}
.btn-warning {
background-color: #EFCD76;
color: #5F4912;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
background-color: #E9BB44;
}
.btn-danger {
background-color: #DA4F49;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
background-color: #BD362F;
color: #FFFFFF;
}
.btn-success {
background-color: #82BF4C;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
background-color: #5BB75B;
color: #FFFFFF;
}
.btn-inverse {
background-color: #3A3C47;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
background-color: #494C59;
color: #FFFFFF;
}
button.btn, input.btn[type="submit"] {
}
button.btn::-moz-focus-inner, input.btn[type="submit"]::-moz-focus-inner {
border: 0 none;
padding: 0;
}
button.btn.btn-large, input.btn.btn-large[type="submit"] {
}
button.btn.btn-small, input.btn.btn-small[type="submit"] {
}
button.btn.btn-mini, input.btn.btn-mini[type="submit"] {
}
.btn-link, .btn-link:active, .btn-link[disabled] {
background-color: transparent;
background-image: none;
}
.btn-link {
border-color: transparent;
color: #0088CC;
cursor: pointer;
}
.btn-link:hover {
background-color: transparent;
color: #005580;
text-decoration: underline;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/g32sj1w55b4cne6/jtubeplayer.js"></script>
<script src="https://googledrive.com/host/0B8d-YryBaqI7eDdiMUlpQklYVDg/"></script>
<script>
//<![CDATA[
$(function () {
$.fn.mPly = function (options) {
var settings = $.extend({
list : []
}, options);
$.extend(settings, options);
var idPlayTube = '#playerVdo',
khmervideo = {
_createTempPlayList : function (obj) {
_list = '';
$.each(obj, function (key, val) {
_list += "<li><a href='" + val.file + "'><img src='http://img.youtube.com/vi/" + khmervideo._youtubeid(val.file) + "/1.jpg'/><b>" + val.title + "</b><span>" + val.description + "</span></a></li>"
});
var listItem = '<div class="list-tube"><div class="scrollbar"><div class="handle"><div class="mousearea"></div></div></div><div class="frame smart" id="smart"><ul class="items">' + _list + '</ul></div><!--<ul class="pages"></ul>--><div class="controls center"><p><button class="btn prevPage"><i class="icon-chevron-left"></i><i class="icon-chevron-left"></i><<</button><button class="btn prev"><i class="icon-chevron-left"></i><</button><button class="btn next">><i class="icon-chevron-right"></i></button><button class="btn nextPage">>><i class="icon-chevron-right"></i><i class="icon-chevron-right"></i></button></p></div></div>';
$('#playerVdo').after(listItem);
$('.items a').click(function (e) {
e.preventDefault();
})
},
_youtubeid : function (url) {
var ytid = url.match("[\?&]v=([^&#]*)");
if (ytid) {
ytid = ytid[1]
} else {
var splits = url.split('/');
ytid = splits[splits.length - 1]
};
return ytid
},
_controll : function () {
var $frame = $('#smart'),
$slidee = $frame.children('ul').eq(0),
$wrap = $frame.parent(),
boolean = false,
boo_click = false;
$frame.sly({
itemNav : 'basic',
smart : 1,
activateOn : 'click',
mouseDragging : 1,
touchDragging : 1,
releaseSwing : 1,
startAt : 0,
scrollBar : $wrap.find('.scrollbar'),
scrollBy : 1,
pagesBar : $wrap.find('.pages'),
activatePageOn : 'click',
speed : 600,
elasticBounds : 1,
easing : 'easeOutExpo',
dragHandle : 1,
dynamicHandle : 1,
clickBar : 1,
forward : $wrap.find('.forward'),
backward : $wrap.find('.backward'),
prev : $wrap.find('.prev'),
next : $wrap.find('.next'),
prevPage : $wrap.find('.prevPage'),
nextPage : $wrap.find('.nextPage')
},{
active : function (eventName, itemIndex) {
if (boolean == true && boo_click == false)
khmervideo._play(itemIndex)
},
load : function () {
boolean = true
}
});
$wrap.find('.toStart').on('click', function () {
var item = $(this).data('item');
$frame.sly('toStart', item)
});
$wrap.find('.toCenter').on('click', function () {
var item = $(this).data('item');
$frame.sly('toCenter', item)
});
$wrap.find('.toEnd').on('click', function () {
var item = $(this).data('item');
$frame.sly('toEnd', item)
})
},
_play : function (inx) {
var idTube = khmervideo._youtubeid($('.items a').eq(inx).attr('href'));
jQuery(idPlayTube).tubeplayer("play", idTube)
},
_nextvdo : function () {
var $liVdo = $('.items li'),
alInd = $liVdo.length - 1;
$liVdo.each(function (index, element) {
if (index <= alInd)
if ($(this).hasClass('active')) {
$('#smart').sly('activate', index + 1);
return false
}
})
},
_tub : function () {
jQuery(idPlayTube).tubeplayer({
width : '100%',
height : '100%',
allowFullScreen : "true",
modestbranding : false,
wmode : "transparent",
initialVideo : khmervideo._youtubeid($('.items a:first').attr('href')),
preferredQuality : "default",
onPlay : function (consol) {},
onPause : function () {},
onStop : function () {},
onSeek : function (time) {},
onMute : function () {},
onUnMute : function () {},
onPlayerCued : function () {},
onPlayerEnded : function () {
khmervideo._nextvdo()
}
})
},
_general : function (listtube) {
khmervideo._createTempPlayList(listtube);
khmervideo._controll();
khmervideo._tub()
}
};
khmervideo._general(settings.list)
}
});
jwplayer.key = "pE+OsvB+C1FFxLIVv0YJTi0wje2T3xe9e2nnWg==";
var khmervideo_media_list = {
_selectedPlayTV : function (arrayObj) {
jwplayer("playerVdo").setup({
width : '100%',
height : 'auto',
playlist : arrayObj,
primary : "flash",
listbar : {
position : "right",
size : 160
},
skin : "http://www.nacodes.com/js/skins/six/six.xml"
})
},
_selectedPlayAllVideo : function (arrayObj) {
$(function () {
$.fn.mPly({
list : arrayObj
})
})
},
_selectedPlayOneVideo : function (arrayObj) {
console.log(arrayObj[0].file);
jwplayer("playerVdo").setup({
width : '100%',
height : '400%',
file : arrayObj[0].file
})
}
}
//]]>
</script>
<script src="https://googledrive.com/host/0B8d-YryBaqI7d19SdU1yNHl4Ukk/"></script>
<script type="text/javascript">
//<![CDATA[
function mySmartColumns() {
var headerWith = $('.headerBg').width();
if(headerWith > 1100){
$("#contentCenter").css({ 'width' : '1090px'});
$(".topVideos ul li").css({ 'margin' : '10px 15px'});
$(".contentLeft").css({ 'width' : '760px'});
$(".resultVideos").css({ 'padding-left' : '20px'});
$(".videosResult").css({ 'width' : '175px'});
$(".playingVideoTitle").css({ 'width' : '600px'});
$(".fb-comments").attr('data-width', '740');
}else{
$(".topVideos ul li").css({ 'margin' : '10px 5px'});
$("#contentCenter").css({ 'width' : '990px'});
$(".contentLeft").css({ 'width' : '660px'});
$(".resultVideos").css({ 'padding-left' : '0px'});
$(".videosResult").css({ 'width' : '156px'});
$(".playingVideoTitle").css({ 'width' : '550px'});
$(".fb-comments").attr('data-width', '640');
}
}
$(document).ready(function() {
mySmartColumns();
$(window).resize(function () {
mySmartColumns();
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
// meanDiv.height(boxh);
//////////////////////////////////
function b(currentDiv){
var sliderWidth = $('#'+currentDiv).width();
var boxw = $('#'+currentDiv).find('.box').outerWidth(true);
var boxInner = Math.floor(sliderWidth/boxw);
var boxn = $('#'+currentDiv).find('.box').length;
var makNext = boxn - boxInner;
cc = (c === 1) ? $('#'+currentDiv).find('.prev').hide() : $('#'+currentDiv).find('.prev').show();
ccc =(c > makNext) ? $('#'+currentDiv).find('.next').hide() : $('#'+currentDiv).find('.next').show();
}
//////// On Start
$('.prev').hide();
$('.next').show();
/////////////////////////////////
function a(currentDiv){
boxw = $('#'+currentDiv).find('.box').outerWidth(true);
$('#'+currentDiv).find('#slider').animate({left: '-'+ (boxw)*(c-1) },400);
}
/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
$('.next').click(function() {
var currentDiv = $(this).parent().attr('id');
c = parseFloat($('#'+currentDiv).find('.counter').text())+1;
$('#'+currentDiv).find('.counter').text(c);
b(currentDiv);
a(currentDiv);
});
$('.prev').click(function() {
var currentDiv = $(this).parent().attr('id');
c = parseFloat($('#'+currentDiv).find('.counter').text())-1;
$('#'+currentDiv).find('.counter').text(c);
b(currentDiv);
a(currentDiv);
});
});
//]]>
</script>
I separate the code above into 2 parts. The red code is CSS code which control video player's appearance and the black code control how video player works. You can change the red code to make video player looks as you want, but cannot edit the black code if you want it works properly. 3. Save template. UsageOpen a blog post that you want to insert video player. Click on HTML tab of Editor window, and paste the following code: <div id="video">
<div id="playerVdo">
</div>
<script>
$(function(){
var list =[
{ "file": "youtube_video_url", "title": "Video_title", "description": "video_description (optional)", "image": "video_thumbnail(optinal)" },
{ "file": "youtube_video_url1", "title": "Video_title1", "description": "video_description1 (optional)", "image": "video_thumbnail1(optinal)" },
];
khmervideo_media_list._selectedPlayAllVideo(list);
});
</script>
</div> In the code above, edit the part in red to Youtube video url you want to show, video title in playlist, video description and video thumbnail. Video description and video thumbnail are not necessary. You can duplicate the code { "file": "youtube_video_url", "title": "Video_title", "description": "video_description (optional)", "image": "video_thumbnail(optinal)" }, to insert more videos into playlist. Save changes and you can see the result. If you want to add video player and playlist in another post, just repeat this step.  |
