STATUS UPDATE

Youtube multi playlist

@Status Update | coding | programming Category List
Share on FacebookTweet about this on TwitterPin on PinterestShare on LinkedInShare on TumblrEmail this to someone

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';
}

Related posts:

Show Hide Made on Ipad 2018-09
Pop Image Preview using DOM and Jquery
Create Custom Slider in jQuery
SVG Animation on Scroll using jQuery
CSS Animation - Thom Yorke Rusty
Combining Animation CSS

Leave a Reply

Your email address will not be published. Required fields are marked *