STATUS UPDATE

Testing Youtube Playlist Easier

Share on FacebookTweet about this on TwitterPin on PinterestShare on LinkedInShare on TumblrEmail this to someone
<div class="tube-wrapper" style="text-align:left;">
<iframe class="aaa" src="https://www.youtube.com/embed/hsQWAyh9Z6o" frameborder="0" width="560" height="315" allowfullscreen></iframe>
<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"]'></div>
</div>



<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('<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>



<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;
}
</style>

Leave a Reply

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