v06

bachors · Mar 15, 2017 · 283cfe9 · 283cfe9
1 parent 750c799
commit 283cfe9
Showing 1 changed file with 29 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -17,11 +17,15 @@
 
 		pre {
 			padding: 10px;
-			background: #fafafa;
 			border-radius: 4px;
-			border: 1px solid #ddd;
+			border: 0px;
+			background: #111;
 			overflow: auto
 		}
+
+		pre.prettyprint.prettyprinted {
+			background: #111
+		}
 
 		@media screen and (max-width:1280px){			
 			body {
@@ -35,24 +39,30 @@
 			}
 		}
 		</style>
+		<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
 
 	</head>
 	<body>	
 
-		<h1 align="center">Demo Example <a href="https://github.com/bachors/jQuery-Youtube-Channels-Playlist" target="_BLANK">YCP.JS v05</a></h1>
-		<p><b>Required:</b> apikey : 'xxxxxxxxxxxxxxxx'<br>
-		<b>Option:</b> playlist : number of videos playlist count. Default = 10<br>
-		<b>Option:</b> autoplay : true or false. Default = false<br>
-		<b>Option:</b> related : true or false. Default = false</p>
-		<pre>&lt;!-- CSS --&gt;
+		<h1 align="center">Demo <a href="https://github.com/bachors/jQuery-Youtube-Channels-Playlist" target="_BLANK">YCP.JS</a></h1>
+
+		<h3>HTML:</h3>
+		<p><b>data-ycp_title</b> : Title your playlist (option)<br>
+		<b>data-ycp_channel</b> : ChannelId, PlayListId or UserName (required)</p>
+		<h3>Javascript:</h3>
+		<p><b>apikey</b> : 'xxxxxxxxxxxxxxxx' (required)<br>
+		<b>playlist</b> : number of videos playlist count (option) Default = 10<br>
+		<b>autoplay</b> : boolean (option) Default = false <br>
+		<b>related</b> : boolean (option) Default = false</p>
+		<pre class="prettyprint">&lt;!-- CSS --&gt;
 &lt;link type="text/css" rel="stylesheet" href="css/ycp.css" /&gt;
 
 &lt;!-- Selector by Id --&gt;
-&lt;div id="unix" data-ycp="UCoiS7s7HrE7bHNuzERi-FCQ"&gt;&lt;/div&gt; &lt;!-- By ChannelId --&gt;
+&lt;div id="unix" data-ycp_title="#Demo - iBacor.com" data-ycp_channel="UCoiS7s7HrE7bHNuzERi-FCQ"&gt;&lt;/div&gt; &lt;!-- By ChannelId --&gt;
 
 &lt;!-- Selector by ClassName --&gt;
-&lt;div class="demo" data-ycp="PLCZlgfAG0GXAiH1acKFPx8EtpJAq44gjP"&gt;&lt;/div&gt; &lt;!-- By PlayListId --&gt;
-&lt;div class="demo" data-ycp="vevouk"&gt;&lt;/div&gt; &lt;!-- By UserName --&gt;
+&lt;div class="demo" data-ycp_title="#Javascript - Sekolah Koding" data-ycp_channel="PLCZlgfAG0GXAiH1acKFPx8EtpJAq44gjP"&gt;&lt;/div&gt; &lt;!-- By PlayListId --&gt;
+&lt;div class="demo" data-ycp_title="#News - Vevo Uk" data-ycp_channel="vevouk"&gt;&lt;/div&gt; &lt;!-- By UserName --&gt;
 
 &lt;!-- jQuery --&gt;
 &lt;script src="//code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
@@ -75,14 +85,13 @@ <h1 align="center">Demo Example <a href="https://github.com/bachors/jQuery-Youtu
 &lt;/script&gt;</pre>
 
 		<!-- Selector by Id -->
-		<h1 align="center">Bachors</h1>	
-		<div id="unix" data-ycp="UCoiS7s7HrE7bHNuzERi-FCQ"></div> <!-- By ChannelId -->
-
+		<div id="unix" data-ycp_title="#Demo - iBacor.com" data-ycp_channel="UCoiS7s7HrE7bHNuzERi-FCQ"></div> <!-- By ChannelId -->
+		<br>
+		
 		<!-- Selector by ClassName -->
-		<h1 align="center">Sekolah Koding</h1>	
-		<div class="demo" data-ycp="PLCZlgfAG0GXAiH1acKFPx8EtpJAq44gjP"></div> <!-- By PlayListId -->
-		<h1 align="center">Vevo Uk</h1>	
-		<div class="demo" data-ycp="vevouk"></div> <!-- By UserName -->
+		<div class="demo" data-ycp_title="#Javascript - Sekolah Koding" data-ycp_channel="PLCZlgfAG0GXAiH1acKFPx8EtpJAq44gjP"></div> <!-- By PlayListId -->
+		<br>
+		<div class="demo" data-ycp_title="#News - Vevo Uk" data-ycp_channel="vevouk"></div> <!-- By UserName -->
 
 		<!-- include jQuery -->
 		<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
@@ -95,14 +104,14 @@ <h1 align="center">Vevo Uk</h1>
 		$(function() {
 
 			$("#unix").ycp({
-				apikey : 'your api key',
+				apikey : 'xxxxxx',
 				playlist : 6,
 				autoplay : true,
 				related : true
 			});
 
 			$(".demo").ycp({
-				apikey : 'your api key'
+				apikey : 'xxxxxx'
 			});
 
 		});