August 15, 2019 at 10:31 pm

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

&lt;div class="youtube-player-wrapper" data="this is just wrapper, not important">
&lt;div class="timer" style="display:none ;position: fixed;background: yellow;padding: 20px;font-size: 50px;top: 50%;left: 0;">&lt;/div>
&lt;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"]'
>&lt;/div>

&lt;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"]'
>&lt;/div>
&lt;/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('&lt;iframe  src="' + fallbackiframe_src + '" frameborder="0" width="' + init_width + '" height="' + init_height + '" allowfullscreen>&lt;/iframe>&lt;div class="tool-wrap">&lt;div class="ytl-credit">(i)&lt;/div>&lt;/div>&lt;div class="list-wrapper">&lt;/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('&lt;a href="#" hrefx="' + url + '" youtube-id="' + id + '" class="yt-list-item">' + the_title + '&lt;img class="thumb-pop" style="display:none;" src="http://img.youtube.com/vi/' + id + '/mqdefault.jpg" />&lt;/a>');
                } else {
                    list_wrapper.append('&lt;a youtube-id="' + id + '" class="yt-list-item">' + the_title + '&lt;img class="thumb-pop" style="display:none;" src="http://img.youtube.com/vi/' + id + '/mqdefault.jpg" />&lt;/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('&lt;div class="but-sizer zoom-a">Bigger Player&lt;/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&amp;version=3&amp;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');
    });

});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

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

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

}

No Comments
OPEN POST TO READ/WRITE COMMENT

HIDE/SHOW CONTENT

Add Hiding Tool Box to Site

August 6, 2019 at 11:25 pm

Move cursor to edge left of the screen. and this concept will appear. I will put my previous Fullscreen toggle in here…

No Comments
OPEN POST TO READ/WRITE COMMENT

HIDE/SHOW CONTENT

Fullscreen My Site – Testing

August 6, 2019 at 9:15 pm

FullScreen API Testing

I am using "body" as parent/root fullscreen element by select body "document.body".<br>
I can use other element too: "document.getElementById('#elm')" for example.

1 2	I am using "body" as parent/root fullscreen element by select body "document.body".<br> I can use other element too: "document.getElementById('#elm')" for example.

Status: YES: Your browser supports FullScreen

CODE

&lt;input value="Go Fullscreen" id="fsbutton-test" type="button">
&lt;input value="Exit Fullscreen" id="fsexit-test" type="button" style="display: none">
&lt;p>Status: &lt;span id="fsstatus-test" class="fullScreenSupported">YES: Your browser supports FullScreen&lt;/span>&lt;/p>

<p>Status: <span id="fsstatus-test" class="fullScreenSupported">YES: Your browser supports FullScreen</span></p>

&lt;script>

/* 
Native FullScreen JavaScript API
-------------
Assumes Mozilla naming conventions instead of W3C for now
*/

(function() {
	var 
		fullScreenApi = { 
			supportsFullScreen: false,
			isFullScreen: function() { return false; }, 
			requestFullScreen: function() {}, 
			cancelFullScreen: function() {},
			fullScreenEventName: '',
			prefix: ''
		},
		browserPrefixes = 'webkit moz o ms khtml'.split(' ');
	
	// check for native support
	if (typeof document.cancelFullScreen != 'undefined') {
		fullScreenApi.supportsFullScreen = true;
	} else {	 
		// check for fullscreen support by vendor prefix
		for (var i = 0, il = browserPrefixes.length; i &lt; il; i++ ) {
			fullScreenApi.prefix = browserPrefixes[i];
			
			if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
				fullScreenApi.supportsFullScreen = true;
				
				break;
			}
		}
	}
	
	// update methods to do something useful
	if (fullScreenApi.supportsFullScreen) {
		fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
		
		fullScreenApi.isFullScreen = function() {
			switch (this.prefix) {	
				case '':
					return document.fullScreen;
				case 'webkit':
					return document.webkitIsFullScreen;
				default:
					return document[this.prefix + 'FullScreen'];
			}
		}
		fullScreenApi.requestFullScreen = function(el) {
			return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
		}
		fullScreenApi.cancelFullScreen = function(el) {
			return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
		}		
	}

	// jQuery plugin
	if (typeof jQuery != 'undefined') {
		jQuery.fn.requestFullScreen = function() {
	
			return this.each(function() {
				var el = jQuery(this);
				if (fullScreenApi.supportsFullScreen) {
					fullScreenApi.requestFullScreen(el);
				}
			});
		};
	}

	// export api
	window.fullScreenApi = fullScreenApi;	
})();

&lt;/script>

Native FullScreen JavaScript API

-------------

Assumes Mozilla naming conventions instead of W3C for now

(function() {

var

fullScreenApi = {

supportsFullScreen: false,

isFullScreen: function() { return false; },

requestFullScreen: function() {},

cancelFullScreen: function() {},

fullScreenEventName: '',

prefix: ''

browserPrefixes = 'webkit moz o ms khtml'.split(' ');

// check for native support

if (typeof document.cancelFullScreen != 'undefined') {

fullScreenApi.supportsFullScreen = true;

} else {

// check for fullscreen support by vendor prefix

for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {

fullScreenApi.prefix = browserPrefixes[i];

if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {

fullScreenApi.supportsFullScreen = true;

break;

}

// update methods to do something useful

if (fullScreenApi.supportsFullScreen) {

fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';

fullScreenApi.isFullScreen = function() {

switch (this.prefix) {

case '':

return document.fullScreen;

case 'webkit':

return document.webkitIsFullScreen;

default:

return document[this.prefix + 'FullScreen'];

}

fullScreenApi.requestFullScreen = function(el) {

return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();

}

fullScreenApi.cancelFullScreen = function(el) {

return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();

}

// jQuery plugin

if (typeof jQuery != 'undefined') {

jQuery.fn.requestFullScreen = function() {

return this.each(function() {

var el = jQuery(this);

if (fullScreenApi.supportsFullScreen) {

fullScreenApi.requestFullScreen(el);

}

});

};

}

// export api

window.fullScreenApi = fullScreenApi;

})();

</script>

&lt;script>

// do something interesting with fullscreen support
var fsButton = document.getElementById('fsbutton-test'),
	fsElement = document.body,
	fsStatus = document.getElementById('fsstatus-test'),
	fsExit = document.getElementById('fsexit-test');


if (window.fullScreenApi.supportsFullScreen) {
	fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
	fsStatus.className = 'fullScreenSupported';
	
	// handle button click
	fsButton.addEventListener('click', function() {
		window.fullScreenApi.requestFullScreen(fsElement);
	}, true);

	// handle exit
	fsExit.addEventListener('click', function() {
		window.fullScreenApi.cancelFullScreen()
	}, true);

	fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
		if (fullScreenApi.isFullScreen()) {
			fsStatus.innerHTML = 'Whoa, you went fullscreen';
			fsElement.style.overflowY = "scroll"; /* ini biar bisa scroll */
			fsButton.style.display = 'none';
			fsExit.style.display = 'block';
		} else {
			fsStatus.innerHTML = 'Back to normal';
			fsElement.style.overflowY = "unset"; /* backto normal tanpa scroll */
			fsButton.style.display = 'block';
			fsExit.style.display = 'none';
		}
	}, true);
	
} else {
	fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
}

&lt;/script>

// do something interesting with fullscreen support

var fsButton = document.getElementById('fsbutton-test'),

fsElement = document.body,

fsStatus = document.getElementById('fsstatus-test'),

fsExit = document.getElementById('fsexit-test');

if (window.fullScreenApi.supportsFullScreen) {

fsStatus.innerHTML = 'YES: Your browser supports FullScreen';

fsStatus.className = 'fullScreenSupported';

// handle button click

fsButton.addEventListener('click', function() {

window.fullScreenApi.requestFullScreen(fsElement);

}, true);

// handle exit

fsExit.addEventListener('click', function() {

window.fullScreenApi.cancelFullScreen()

}, true);

fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {

if (fullScreenApi.isFullScreen()) {

fsStatus.innerHTML = 'Whoa, you went fullscreen';

fsElement.style.overflowY = "scroll"; /* ini biar bisa scroll */

fsButton.style.display = 'none';

fsExit.style.display = 'block';

} else {

fsStatus.innerHTML = 'Back to normal';

fsElement.style.overflowY = "unset"; /* backto normal tanpa scroll */

fsButton.style.display = 'block';

fsExit.style.display = 'none';

}

}, true);

} else {

fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';

}

</script>

No Comments
OPEN POST TO READ/WRITE COMMENT

HIDE/SHOW CONTENT

Grouping The Products

August 5, 2019 at 10:42 am

It is finally done, I can do grouping this products…

No Comments
OPEN POST TO READ/WRITE COMMENT

HIDE/SHOW CONTENT

Select/Remove ATTR Before/After Some Words

August 5, 2019 at 9:13 am

find and select juga part words in attribute

tujuannya digunakan untuk sorting product2 dari sprdshrt biar aku bisa collecting image/link untuk digunakan di ad. karena yang ada hanya nama aria product yang separated dengan “-“.
Setelah klik akan ada attr baru yang nantinya akan digunakan untuk grouping nantinya.

&lt;script async="" src="//jsfiddle.net/toniagustian/yc7hoLq1/10/embed/js,html,css,result/dark/">&lt;/script>

1	<script async="" src="//jsfiddle.net/toniagustian/yc7hoLq1/10/embed/js,html,css,result/dark/"></script>

..And this is the real use

&lt;script async src="//jsfiddle.net/toniagustian/u7d61afe/6/embed/js,html,css,result/dark/">&lt;/script>

1	<script async src="//jsfiddle.net/toniagustian/u7d61afe/6/embed/js,html,css,result/dark/"></script>

2 Comments
OPEN POST TO READ/WRITE COMMENT

HIDE/SHOW CONTENT

Jquery CSS Select part of Attribute

August 5, 2019 at 8:01 am

find and select juga part words in attribute

No Comments
OPEN POST TO READ/WRITE COMMENT

HIDE/SHOW CONTENT

Jquery Text Copier

August 5, 2019 at 7:45 am

Just a way to make copying easy.. I use it copy tags and information of my products whic is many….

No Comments
OPEN POST TO READ/WRITE COMMENT

HIDE/SHOW CONTENT

Jquery wrap N Words

August 5, 2019 at 6:47 am

..test again, using data

No Comments
OPEN POST TO READ/WRITE COMMENT

HIDE/SHOW CONTENT

Testing Youtube Playlist Easier

July 25, 2019 at 2:01 am

&lt;div class="tube-wrapper" style="text-align:left;">
&lt;iframe class="aaa" src="https://www.youtube.com/embed/hsQWAyh9Z6o" frameborder="0" width="560" height="315" allowfullscreen>&lt;/iframe>
&lt;div class="list-wrapper" data-youtubelist='["https://www.youtube.com/watch?v=FNrQOUtXYOo", "https://www.youtube.com/watch?v=VQJp135efOY", "https://www.youtube.com/watch?v=0mGguowiblc"]'>&lt;/div>
&lt;/div>



&lt;script type="text/javascript">
$(document).ready(function(){
	
	// change this variables
	var $tube_wrapper = '.tube-wrapper';

	var $resize_button = true;
	var $thumb_hover_preview = true;
	var $init_width = 560 ;
	var $init_height = 315 ;
	
		
	// do not change this variables
	var daftar_id = $('.list-wrapper').data('youtubelist');
	var $list_wrapper = $tube_wrapper + ' .list-wrapper';
	var $list_item = $list_wrapper + ' a';
	var $the_iframe =  $tube_wrapper + ' iframe';

/* get json title*/

		$.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 = '';	
			/* 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;

				$( $list_wrapper ).append('&lt;a href="'+url+'" youtube-id="'+id+'" class="test-name">'+ the_title +'&lt;img src="http://img.youtube.com/vi/'+id+'/mqdefault.jpg" class="thumb-pop">&lt;/img>&lt;/a>');	
				// image follow mouse
				var $img = $( $tube_wrapper + ' .thumb-pop');
				$img.hide();
				if ( $thumb_hover_preview == true ) {
					$( $list_item ).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();
					});
				};
				//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');					
			});	
		
		});

	//on click list-items
	$(document).on('click', $list_item , function (e) {
		$( $list_item ).removeClass('hilite');
		var srcz = $(this).attr('youtube-id');
		$( $the_iframe ).attr('src', 'https://www.youtube.com/embed/' + srcz + '?autoplay=1');
		$('.playing').removeClass('playing')
		$(this).addClass('played playing');
		e.preventDefault();
	});
	
	// initial size iframe window
	$( $the_iframe ).css({width: $init_width, height: $init_height});
	$( $the_iframe ).css({'box-sizing':'border-box'});
	
	// add resize iframe window
	
	if ( $resize_button == true ) {
		var wrapper_width = $($tube_wrapper).width();
		var ratio_height = ( wrapper_width / 16 ) * 9 ;
			
		$('&lt;br />&lt;button class="but-sizer zoom-a">Bigger Player&lt;/button>').insertAfter($the_iframe);
		
		$(document).on('click', $tube_wrapper +' .zoom-a',  function () {
			$(this).addClass('zoom-b').removeClass('zoom-a').html('Smaller Player');
			$( $the_iframe ).animate({width: wrapper_width, height: ratio_height}).removeAttr('width, height');			
		});	
		$(document).on('click', $tube_wrapper +' .zoom-b',  function () {
			$(this).addClass('zoom-a').removeClass('zoom-b').html('Bigger Player');
			$( $the_iframe ).animate({width: $init_width, height: $init_height}).removeAttr('width, height');
		});	
	}
});
&lt;/script>



&lt;style type="text/css">
.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;}
.played {opacity:0.5;}
.playing , .hilite {opacity:1 !important; color: red !important;}
.playing:before {content: ">  "}
.thumb-pop {
    position: absolute;
    width: 80px;
    border-radius: 4px !important;
    margin-left: 23px;
    border: 2px solid white !important;
}
.but-sizer {
    background: #a2a2a2;
    border-radius: 20px;
    padding: 5px 20px;
    font-size: 12px;
    border: 7px solid #eee;
    margin: 6px 0 11px;
	cursor: pointer;
}
&lt;/style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

</div>

$(document).ready(function(){

// change this variables

var $tube_wrapper = '.tube-wrapper';

var $resize_button = true;

var $thumb_hover_preview = true;

var $init_width = 560 ;

var $init_height = 315 ;

// do not change this variables

var daftar_id = $('.list-wrapper').data('youtubelist');

var $list_wrapper = $tube_wrapper + ' .list-wrapper';

var $list_item = $list_wrapper + ' a';

var $the_iframe = $tube_wrapper + ' iframe';

/* get json title*/

$.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 = '';

/* 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;

$( $list_wrapper ).append('<a href="'+url+'" youtube-id="'+id+'" class="test-name">'+ the_title +'<img src="http://img.youtube.com/vi/'+id+'/mqdefault.jpg" class="thumb-pop"></img></a>');

// image follow mouse

var $img = $( $tube_wrapper + ' .thumb-pop');

$img.hide();

if ( $thumb_hover_preview == true ) {

$( $list_item ).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();

});

};

//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');

});

//on click list-items

$(document).on('click', $list_item , function (e) {

$( $list_item ).removeClass('hilite');

var srcz = $(this).attr('youtube-id');

$( $the_iframe ).attr('src', 'https://www.youtube.com/embed/' + srcz + '?autoplay=1');

$('.playing').removeClass('playing')

$(this).addClass('played playing');

e.preventDefault();

});

// initial size iframe window

$( $the_iframe ).css({width: $init_width, height: $init_height});

$( $the_iframe ).css({'box-sizing':'border-box'});

// add resize iframe window

if ( $resize_button == true ) {

var wrapper_width = $($tube_wrapper).width();

var ratio_height = ( wrapper_width / 16 ) * 9 ;

$('<br /><button class="but-sizer zoom-a">Bigger Player</button>').insertAfter($the_iframe);

$(document).on('click', $tube_wrapper +' .zoom-a', function () {

$(this).addClass('zoom-b').removeClass('zoom-a').html('Smaller Player');

$( $the_iframe ).animate({width: wrapper_width, height: ratio_height}).removeAttr('width, height');

});

$(document).on('click', $tube_wrapper +' .zoom-b', function () {

$(this).addClass('zoom-a').removeClass('zoom-b').html('Bigger Player');

$( $the_iframe ).animate({width: $init_width, height: $init_height}).removeAttr('width, height');

});

}

});

</script>

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

.played {opacity:0.5;}

.playing , .hilite {opacity:1 !important; color: red !important;}

.playing:before {content: "> "}

.thumb-pop {

position: absolute;

width: 80px;

border-radius: 4px !important;

margin-left: 23px;

border: 2px solid white !important;

}

.but-sizer {

background: #a2a2a2;

border-radius: 20px;

padding: 5px 20px;

font-size: 12px;

border: 7px solid #eee;

margin: 6px 0 11px;

cursor: pointer;

}

</style>

No Comments
OPEN POST TO READ/WRITE COMMENT

HIDE/SHOW CONTENT

2019-07-21

July 21, 2019 at 11:02 pm

This is a test… please ignore

No Comments
OPEN POST TO READ/WRITE COMMENT

HIDE/SHOW CONTENT

www.toniagustian.com

I'm all about designs

@Status Update

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

jQuery / Javascript

CSS

Move cursor to edge left of the screen. and this concept will appear. I will put my previous Fullscreen toggle in here…

FullScreen API Testing

CODE

It is finally done, I can do grouping this products…

find and select juga part words in attribute

..And this is the real use

find and select juga part words in attribute

Just a way to make copying easy.. I use it copy tags and information of my products whic is many….

..test again, using data