01.<!DOCTYPE html>
02.<html>
03.<head>
05. <style>
06..youtube-player{font-size:86%;position:relative;}
07..youtube-player-toolbar{background:#ff6600;margin:.1em 0 0 0;}
08..youtube-player-toolbar li.youtube-player-time{float:right;font-weight:normal;font-size:13px;line-height:28px;margin:0pt 5px 0pt 0pt;padding:0;display:none;cursor:default;}
09..youtube-player-object{border:1px solid #282828;}
10..youtube-player-toolbar li{cursor:pointer;float:left;list-style:none outside none;margin:2px;padding:4px 0;}
11..youtube-player-toolbar li span.ui-icon{float:left;margin:0 4px;}
12..youtube-player-playlist-container{border:1px solid #282828;margin-top:.2em;position:relative;display:none;}
13..youtube-player-playlist{list-style:decimal;overflow:auto;margin:2px;padding:0;}
14..youtube-player-playlist li{overflow-x:hidden;border:0;cursor:pointer;text-decoration:none;list-style:decimal;padding:2px 4px 2px;white-space:nowrap;font-size:13px;}
15..youtube-player-playlist .youtube-player-thumb{float:left;height:90px;width:124px;list-style:none;overflow:hidden;}
16..youtube-player-playlist .youtube-player-thumb img{height:90px;width:124px;}
17..ui-state-default,.ui-widget-content .ui-state-default{background:-9999px -9999px;}
18..ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{background:50% 50%;}
19..ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:#333;}
20.</style>
25. <meta charset="utf-8">
26. <title>YOUTUBE PLAYLIST</title>
27.</head>
28.<body>
29.
30.<div style="border: 1px solid rgb(255, 102, 0); width: 450px; padding:5px;">
31. <div class="youtube-player" >
32. <div class="youtube-player-video"><div class="youtube-player-object">You need Flash player 8+ and JavaScript enabled to view this video.</div></div>
33. </div>
34. <div id="volume"></div>
35. <div id="toolbar"></div>
36. Timer: <div id="time" style="display:inline"></div>
37.</div>
38.
39. <script>
40. $(function() {
41. $( "#volume" ).slider({
42. orientation: "horizontal",
43. range: "min",
44. value: 50,
45. min: 0,
46. max: 100,
47. slide: function(event, ui) {
48. $('.youtube-player-video object').get(0).setVolume(ui.value);
49. $("#amount").val(ui.value);
50. }
51. });
52. $("#amount").val($("#volume").slider("value"));
53.});
54.(function($){
55. var config = {
56. toolbarAppendTo: '#toolbar',
57.
58. timeAppendTo: '#time',
59.
60.
61. playlist: {
62. title: 'Random videos',
63. videos: [
64. { id: 'hPzNl6NKAG0', title: 'แมวเหมียวๆ' }
65. ]
66. }
67. };
68. $('.youtube-player').player(config);
69. })(this.jQuery);
70. </script>
71.</body>
72.</html>
