Added fading and hopefully a better userexperience

js/youtube.js

@@ -61,7 +61,7 @@ $(document).ready(function()
 		response = "1";
 	}
 	
-	
+	/*
 	$.ajax({
 		type: 'get',
 		url: 'php/timedifference.php',
@@ -72,7 +72,7 @@ $(document).ready(function()
 		}
 	});
 	console.log("timediff:"+timeDifference[0]);
-
+*/
 	
 	if(window.mobilecheck()){
 		//syncInterval = setInterval(getTime, 50000);
@@ -94,6 +94,7 @@ $(document).ready(function()
 });
 
 function onYouTubeIframeAPIReady() {
+	$("#change").css("opacity", "1");
 	ytplayer = new YT.Player('player', {
 		height: window.height*0.75,
 		width: window.width*0.6,
@@ -106,6 +107,8 @@ function onYouTubeIframeAPIReady() {
 			'onPlaybackQualityChange': logQ
 		}
 	});
+	$("#player").css("opacity", "0");
+	initYoutubeControls(ytplayer);
 }
 
 function onPlayerStateChange(newState) {
@@ -347,9 +350,11 @@ function onPlayerReady(event) {
 		getTime();
 		if(!window.mobilecheck())
 		{
+			$("#player").css("opacity", "1");
+			$("#controls").css("opacity", "1");
+			//$("#player").fadeIn();
 			ytplayer.playVideo();
 		}
-		initYoutubeControls(ytplayer);
 		readyLooks();
 		initSlider();
 		//durationFixer = setInterval(durationSetter, 1000);

static/controlstyle.css

@@ -1,6 +1,7 @@
 
 #controls
 {
+	opacity:0;
 	height:30px;
 	background-color:rgba(255, 255, 255, 0.25);
 	position:absolute;
@@ -11,6 +12,8 @@
 	-ms-transform: translate3d(0,0,0);
 	-o-transform: translate3d(0,0,0);
 	transform: translate3d(0,0,0);
+	-webkit-transition:opacity 1s;
+	transition: opacity 1s;
 }
 
 #q, #fullscreen, #playpause

static/style.css

@@ -35,6 +35,11 @@ body {
     -webkit-transform:translateY(-54%)
 }
 
+#change {
+    opacity:0;
+    -webkit-transition: opacity 1s;
+}
+
 /*#change{ display: table-cell; vertical-align: middle;}*/
 ::-webkit-input-placeholder {
     color:#FEFEFE
@@ -369,11 +374,17 @@ body {
 }
 
 #player {
+    -webkit-transition: opacity 1s;
+    transition: opacity 1s;
     height:68%;
     height:calc(87% - 213px);
     width:60%;
     border-radius:3px
-/*box-shadow: 0 8px 11px -4px black;*/
+    /*box-shadow: 0 8px 11px -4px black;*/
+}
+
+iframe {
+    -webkit-transition:opacity 1s;
 }
 
 #playlist {
@@ -656,7 +667,7 @@ body {
 #toptitle {
     color:#fff;
     font-weight:700;
-    text-shadow:0 0 12px rgba(0,0,0,0.5)
+    text-shadow:0 0 12px rgba(0,0,0,0.5);
 }
 
 #mobile-banner {