Average design for tiny player attained.

app/assets/javascripts/music_player.js

@@ -99,6 +99,7 @@ function soundcloud_click() {
 function player_destroy() {
   $("#on_play").removeAttr("id");
   music_info.attr("id", "on_play");
+  $("#player_block").removeClass("soundcloud_player");
 
   $("#player").remove();
   $("#next").remove();
@@ -139,7 +140,7 @@ function soundcloud_player() {
   else { player_height = 20; }
 
   var music_url = "https://www.soundcloud.com/"+music_info.data().url;
-  SC.oEmbed(music_url, { auto_play: true , maxheight: player_height, maxwidth: 1000 }, function(oEmbed, error) {
+  SC.oEmbed(music_url, { auto_play: true , maxheight: player_height, maxwidth: 640}, function(oEmbed, error) {
     if (error) { 
       next_music();
     }
@@ -150,7 +151,8 @@ function soundcloud_player() {
     }
   });
  
-  $("#white").css({'height':68+player_height}).slideDown();
+  $("#white").css({'height':60+player_height}).slideDown();
+  $("#player_block").addClass("soundcloud_player");
   player_min = 20;
   player_max = 120;
 }

app/assets/stylesheets/music_index.css

@@ -18,7 +18,7 @@ a, .page.current
   color: rgba(0, 110, 140, 0.95);
 }
 
-.cloud:hover{
+.cloud:hover, #player:hover, #next:hover{
   color: rgba(255,220,180,1);
   background-color: rgba(0, 110, 140, 0.95);
 }
@@ -39,7 +39,7 @@ ul
 .clickable_links
 {
   background-color: rgba(0, 110, 140, 1);
-  margin: 2px 10px;
+  margin: 0 10px 2px 10px;
   cursor: pointer;
   padding: 10px 0;
   border-radius: 12px;
@@ -73,7 +73,7 @@ ul
   background-color: rgba(0, 110, 140, 1);
 }
 #white{
-  height: 63px;
+  height: 47px;
 }
 
 #header{
@@ -94,9 +94,9 @@ body, html, head{
   text-align: center;
   cursor: pointer;
   width: 15%;
-  padding: 15px 0;
+  padding: 10px 0;
   display: inline-block;
-  font: 20px Helvetica Neue, Helvetica, Arial, sans-serif;
+  font: 15px Helvetica Neue, Helvetica, Arial, sans-serif;
   overflow: hidden;
   vertical-align: middle;
   border-radius: 0;
@@ -106,14 +106,29 @@ body, html, head{
   display: none;
 }
 
+#player_menu{
+  font-size: 0;
+}
+
+#player_position{
+  display: inline-block;
+  width: 70%; 
+}
+
+#player_block{
+  display: block;
+}
+
 #player_button, #next_button{
-  width: 20%;
+  width: 15%;
   text-align: center;
+  display: inline-block;
 }
 
 #player, #next{
-  cursor: pointer;
   padding: 5px;
+  margin-bottom: 5px;
+  cursor: pointer;
   font: 15px Helvetica Neue, Helvetica, Arial, sans-serif;
   overflow: hidden;
   border-radius: 0;
@@ -147,7 +162,12 @@ body, html, head{
   width: 20%;
 }
 
+.soundcloud_player{
+  margin-bottom: 10px;
+}
+
 iframe{
-  display: inline;
+  display: block;
   margin: 0 auto;
+  margin-bottom: 5px;
 }

app/views/channels/index_users.html.erb

 <% @usercloud.each do |user,weight| %>
-  <%= link_to user, '/musics/users/'+user, style: "font-size:"+(15+weight*200).to_s+"px", class: "cloud" %>
+  <%= link_to user, '/musics/users/'+user, style: "font-size:"+(15+weight*100).to_s+"px", class: "cloud" %>
 <% end %>

app/views/layouts/application.html.erb

@@ -18,11 +18,7 @@
     </li>
     <!-- </ul>
     <div id="player_position"><div id="player_block"></div></div> -->
-    <li>
-    <span id="player_button"></span>
-    <span id="player_position"><span id="player_block"></span></span>
-    <span id="next_button"></span>
-    </li>
+    <li id="player_menu"><span id="player_button"></span><span id="player_position"><span id="player_block"></span></span><span id="next_button"></span></li>
   </ul>
 </div>
 <%= yield %>