This is not a perfect one, because I already discover the use of youtube API right now. This was the previous research I’ve done. But it is worth to put here as post as journal.
It runs good already. Much better then the previous I have done for youtube playlist.
It already can pause directly from playlist, pause on takeover by other playlist. test it yourself.
HTML
<div class="youtube-player-wrapper" data="this is just wrapper, not important">
<div class="timer" style="display:none ;position: fixed;background: yellow;padding: 20px;font-size: 50px;top: 50%;left: 0;"></div>
<div class="tube-caller" data-youtubelist='[
"https://www.youtube.com/watch?v=Bk5ZL2n6uPs",
"https://www.youtube.com/watch?v=t2QNBpc0vy4",
"https://www.youtube.com/watch?v=kMjdEWf2Dq0"]'
></div>
<div class="tube-caller" data-youtubelist='[
"https://www.youtube.com/watch?v=6irLhCxvpfY",
"https://www.youtube.com/watch?v=x6wYV6UP0SU",
"https://www.youtube.com/watch?v=SsIk8c7mSdI"]'
></div>
</div>
jQuery / Javascript
$(document).ready(function () {
var resize_button
var thumb_hover_preview
var init_width
var init_height
var list_as_link
var fallbackiframe_src
$('.tube-caller').each(function () {
// change this variables
$tube_wrapper = $(this);
resize_button = true;
thumb_hover_preview = true;
init_width = 560;
init_height = 315;
list_as_link = true;
fallbackiframe_src = 'https://www.youtube.com/embed/hsQWAyh9Z6o';
/* BUILDING BLOCKS */
$(this).removeClass().addClass('tube-wrapper').append('<iframe src="' + fallbackiframe_src + '" frameborder="0" width="' + init_width + '" height="' + init_height + '" allowfullscreen></iframe><div class="tool-wrap"><div class="ytl-credit">(i)</div></div><div class="list-wrapper"></div>');
// do not change this variables
var daftar_id = $tube_wrapper.data('youtubelist');
var list_wrapper = $tube_wrapper.find('.list-wrapper');
var list_item = $tube_wrapper.find('.list-wrapper a');
var the_iframe = $tube_wrapper.find('iframe');
/* EACH ID */
$.each(daftar_id, function (index, value) {
var url = value;
video_id = url.match(/v=(.{11})/)[1]/* striping url */
var id = video_id;
var the_title = '';
/* TITLE AKAN DICARI MENGGUNAKAN JSON. use the Noembed service to get oEmbed data with JSONP for YouTube videos. */
$.getJSON('https://noembed.com/embed', {
format: 'json',
url: url
}, function (data) {
the_title = data.title;
if (list_as_link == true) {
list_wrapper.append('<a href="#" hrefx="' + url + '" youtube-id="' + id + '" class="yt-list-item">' + the_title + '<img class="thumb-pop" style="display:none;" src="http://img.youtube.com/vi/' + id + '/mqdefault.jpg" /></a>');
} else {
list_wrapper.append('<a youtube-id="' + id + '" class="yt-list-item">' + the_title + '<img class="thumb-pop" style="display:none;" src="http://img.youtube.com/vi/' + id + '/mqdefault.jpg" /></a>');
}
//set the default video
var first_load = list_wrapper.children(':first').addClass('hilite').attr('youtube-id');
the_iframe.attr('src', 'https://www.youtube.com/embed/' + first_load + '?autoplay=0');
});
});
if (resize_button == true) {
$tube_wrapper.find('.tool-wrap').append('<div class="but-sizer zoom-a">Bigger Player</div>');
}
// INITIAL SIZE IFRAME WINDOW
$(the_iframe).css({
width: init_width,
height: init_height
});
$(the_iframe).css({
'box-sizing': 'border-box'
});
});
//on click list-items
$(document).on('click', '.yt-list-item ', function (e) {
var this_parent = $(this).parents('.tube-wrapper');
var intz = 0;
if ($(this).hasClass('playing')) {
$(this).parents('.tube-wrapper').find('iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
$(this).removeClass('playing').addClass('pausing');
} else if ($(this).hasClass('pausing')) {
// STOP ANY OTHER PLAYING VIDEO
$('.tube-wrapper').each(function () {
if ($(this).find('.playing').length) {
var play_id = $(this).find('.playing').attr('youtube-id');
$(this).find('.playing').addClass('taken-over played pausing').removeClass('playing');
$(this).find('iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
}
});
// SET IFRAME TO PLAY VIDEO
this_parent.find('iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
// WAITING THE FILE TO LOAD SO COMMAND CAN BE EXECURE "NOT THE GOOD TECHNIC SO FAR"
var aaaa = setInterval(function () {
intz += 1;
intz_x = intz
this_parent.find('.playing').attr('itv', intz_x);
}, 1000);
// SET THIS AS PLAYING
$(this).removeClass('pausing').addClass('playing');
} else {
//STOP ALL OTHER PLAYER
$('.tube-wrapper').find('.taken-over').removeClass('taken-over');
$('.tube-wrapper').each(function () {
if ($(this).find('.playing').length) {
var play_id = $(this).find('.playing').attr('youtube-id');
$(this).find('.playing').removeClass('playing').addClass('taken-over played pausing');
$(this).find('iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
}
});
this_parent.find('.pausing').removeClass('pausing').addClass('taken-over played');
// SET TO PLAY THE CLICKED
var srcz = $(this).attr('youtube-id');
this_parent.find('iframe').attr('src', 'https://www.youtube.com/embed/' + srcz + '?enablejsapi=1&version=3&playerapiid=ytplayer');
var wait_time = 5000;
secondz = 0;
var timer_sec = setInterval(function () {
secondz += 1;
if (secondz == wait_time / 1000) {
clearInterval(timer_sec);
$('.timer').hide();
}
$('.timer').text(secondz);
}, 1000);
$('.timer').show();
var player = this_parent.find('iframe')[0];
var timez = player.contentWindow.postMessage('{"event":"command","func":"' + 'getCurrentTime' + '","args":""}', '*');
$('.get-time').text(timez);
setTimeout(function () {
this_parent.find('iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
var fffx = setInterval(function () {
intz += 1;
intz_x = intz
this_parent.find('.playing').attr('itv', intz_x);
this_parent.find('.playing').on('click', function () {
clearInterval(fffx);
});
}, 1000);
}, wait_time); // waktu kira2 loading video
this_parent.find('.hilite').removeClass('hilite');
$(this).addClass('playing');
}
e.preventDefault();
});
$("iframe").load(function () {
$(this).contents().on("mousedown, mouseup, click", function () {
alert("Click detected inside iframe.");
});
});
// IMAGE FOLLOW MOUSE -- OK
if (thumb_hover_preview == true) {
$(document).on('mouseover', '.yt-list-item', function () {
var $img = $(this).children('.thumb-pop');
$(this).mousemove(function (e) {
$(this).children($img).stop(1, 1).show();
$(this).children($img).offset({
top: e.pageY - $img.outerHeight(),
left: e.pageX + 15 /* - ( $img.outerWidth() /2 )*/
});
}).mouseleave(function () {
$img.hide();
});
});
};
// BUTTON RESIZE IFRAME WINDOW
$(document).on('click', '.zoom-a', function () {
var wrapper_width = $(this).parents('.tube-wrapper').width();
var ratio_height = (wrapper_width / 16) * 9;
var frame = $(this).parents('.tube-wrapper').find('iframe');
$(this).addClass('zoom-b').removeClass('zoom-a').html('Smaller Player');
$(frame).animate({
width: wrapper_width,
height: ratio_height
}).removeAttr('width, height');
});
$(document).on('click', '.zoom-b', function () {
var frame = $(this).parents('.tube-wrapper').find('iframe');
$(this).addClass('zoom-a').removeClass('zoom-b').html('Bigger Player');
$(frame).animate({
width: init_width,
height: init_height
}).removeAttr('width, height');
});
// CREDIT
$(document).on('click', '.ytl-credit', function () {
$(this).toggleClass('ytl-showing');
});
});
CSS
.tube-wrapper {
display: block;
}
.playlist-wrapper iframe {
border-radius: 5px;
border: 8px solid #eee;
}
.list-wrapper a {
display: table;
cursor: pointer;
}
.list-wrapper {
margin-left: 10px;
margin-bottom: 30px;
clear: both;
}
.played {
opacity:0.5;
}
.playing , .hilite {
opacity:1 !important;
color: red !important;
}
.playing::before {
content: "\25BA";
margin: 0 6px 0 0;
}
/*
.taken-over::before {
content: "\25AB";
margin: 0 6px 0 0;
}
*/
.pausing::before {
content: "\258C \258C ";
}
.thumb-pop {
position: absolute;
width: 80px;
border-radius: 4px !important;
margin-left: 23px;
border: 2px solid white !important;
}
.but-sizer {
background: #aaa8a8;
border-radius: 0 0 20px 20px;
padding: 5px 20px;
font-size: 12px;
border: 5px solid #d1d1d1;
margin: -5px 0 11px;
cursor: pointer;
color: white;
}
.tube-wrapper iframe {
border: 5px solid rgb(209, 209, 209);
border-radius: 5px;
}
.tool-wrap {
margin-bottom: 20px;
box-sizing: border-box;
margin-top: -11px;
}
.tool-wrap * {
background: #aaa8a8;
font-size: 11px;
border: 5px solid #d1d1d1;
cursor: pointer;
color: white;
padding: 5px 13px;
display: table;
}
.ytl-credit {
border-radius: 0 0 0 20px;
float: left;
}
.but-sizer {
border-radius: 0 0 20px 0;
border-left: 0;
}
.ytl-showing::after {
content: ' ..Script by Toni Agustian, 2019';
}