More polish to youtube player.

static/cranefly/css/cranefly.css

@@ -830,9 +830,10 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{color:#333;text-decoration:n
 .markdown code,.markdown article code{background-color:#333;border-color:#000;color:#eee;text-shadow:0 1px 0 #000}
 .markdown pre,.markdown article pre{background-color:#222;padding:7px 14px}.markdown pre code,.markdown article pre code{background:none;border:none;color:#eee;font-size:11.9px}
 .markdown img,.markdown article img{background-color:#fff;border-radius:3px;margin:10px 0}
-.markdown .media-border,.markdown article .media-border{border-radius:3px;display:inline-block;overflow:hidden;margin:10px 0}.markdown .media-border iframe,.markdown article .media-border iframe{margin:0}
-.markdown .media-border .media-thumbnail,.markdown article .media-border .media-thumbnail{width:480px;height:360px;text-align:center}.markdown .media-border .media-thumbnail a,.markdown article .media-border .media-thumbnail a{background-color:rgba(0,0,0,0.8);border-radius:11.9px;display:inline-block;margin-top:120px;padding:11px 19px;color:#eee;text-align:center;text-shadow:0 1px 1px #000}.markdown .media-border .media-thumbnail a:hover,.markdown article .media-border .media-thumbnail a:hover,.markdown .media-border .media-thumbnail a:active,.markdown article .media-border .media-thumbnail a:active{color:#fff;text-shadow:0 0 5px #eee,0 1px 1px #000}
+.markdown .media-border,.markdown article .media-border{border-radius:3px;display:inline-block;overflow:hidden;margin:10px 0}.markdown .media-border iframe,.markdown article .media-border iframe{margin:-2px 0}
+.markdown .media-border .media-thumbnail,.markdown article .media-border .media-thumbnail{width:480px;height:360px;text-align:center}.markdown .media-border .media-thumbnail a,.markdown article .media-border .media-thumbnail a{background-color:rgba(0,0,0,0.8);border-radius:11.9px;display:inline-block;margin-top:120px;padding:11px 19px;color:#eee;text-align:center;text-shadow:0 1px 1px #000}.markdown .media-border .media-thumbnail a:hover,.markdown article .media-border .media-thumbnail a:hover,.markdown .media-border .media-thumbnail a:active,.markdown article .media-border .media-thumbnail a:active{color:#fff;text-decoration:none;text-shadow:0 0 5px #eee,0 1px 1px #000}
 .markdown .media-border .media-thumbnail a .icon-youtube-sign,.markdown article .media-border .media-thumbnail a .icon-youtube-sign{display:block;clear:both;font-size:84px;text-decoration:none}
+.markdown .media-border .media-thumbnail a.movie-title,.markdown article .media-border .media-thumbnail a.movie-title{margin-top:104px}.markdown .media-border .media-thumbnail a.movie-title strong,.markdown article .media-border .media-thumbnail a.movie-title strong{display:block;margin-top:6px;font-size:17.5px}
 .markdown pre,.markdown article pre,.markdown blockquote,.markdown article blockquote,.markdown iframe,.markdown article iframe{margin-top:20px;margin-bottom:20px}.markdown pre article>:first-child,.markdown article pre article>:first-child,.markdown blockquote article>:first-child,.markdown article blockquote article>:first-child,.markdown iframe article>:first-child,.markdown article iframe article>:first-child{margin-top:0}
 .markdown pre article>:last-child,.markdown article pre article>:last-child,.markdown blockquote article>:last-child,.markdown article blockquote article>:last-child,.markdown iframe article>:last-child,.markdown article iframe article>:last-child{margin-bottom:0}
 .markdown .emoji,.markdown article .emoji{background:none;border-radius:0;margin:0;vertical-align:middle}

static/cranefly/css/cranefly/markdown.less

@@ -97,7 +97,7 @@
     margin: (@baseLineHeight / 2) 0px;
 
     iframe {
-    	margin: 0px;
+    	margin: -2px 0px;
     }
 
     .media-thumbnail {
@@ -119,6 +119,7 @@
 
 	    	&:hover, &:active {
 	    		color: @white;
+	    		text-decoration: none;
 	    		text-shadow: 0px 0px 5px @grayLighter,
 	    								 0px 1px 1px @black;
 	    	}
@@ -130,6 +131,17 @@
 	    		font-size: @baseFontSize * 6;
 	    		text-decoration: none;
 	    	}
+
+		  	&.movie-title {
+		  		margin-top: 120px - @baseFontSize - 2px;
+
+		    	strong {
+		    		display: block;
+		    		margin-top: 6px;
+
+		    		font-size: @fontSizeLarge;
+		    	}
+		  	}
     	}
     }
   }

static/cranefly/js/cranefly.js

@@ -167,12 +167,20 @@ function youtube_player(element, media_url, startfrom) {
     player_url = 'http://www.youtube.com/embed/' + media_url + '?autoplay=1';
   }
 
-  var media_element = $('<div><div class="media-border"><div class="media-thumbnail" style="background: url(\'http://img.youtube.com/vi/' + media_url + '/0.jpg\');"><a href="' + $.trim($(element).text()) + '" data-playerurl="' + player_url + '"><i class="icon-youtube-sign"></i>' + l_play_media_msg + '</a></div></div></div>');
-  $(media_element).find('.media-thumbnail a').click(function() {
+  var media_element = $('<div><div class="media-border"><div class="media-thumbnail" style="background: url(\'http://img.youtube.com/vi/' + media_url + '/0.jpg\');"><a href="' + $.trim($(element).text()) + '" class="play-link" data-playerurl="' + player_url + '"><i class="icon-youtube-sign"></i><strong>' + l_play_media_msg + '</strong></a></div></div></div>');
+  $(media_element).find('.play-link').click(function() {
     $(this).parent().replaceWith('<iframe width="480" height="360" src="' + $(this).data('playerurl') + '" frameborder="0" allowfullscreen></iframe>');
     return false;
   });
   $(element).replaceWith(media_element);
+  $.getJSON("https://gdata.youtube.com/feeds/api/videos/" + media_url + "?v=2&alt=json",
+            function(data, textStatus, jqXHR) {
+              var movie_title = data.entry.title.$t;
+              var movie_author = data.entry.author['0'].name.$t
+              $(media_element).find('.play-link').addClass('movie-title');
+              $(media_element).find('.play-link strong').text(movie_title);
+              $(media_element).find('.play-link').append(l_play_media_author.replace('{author}', movie_author));
+            });
   return true;
 }
 

templates/cranefly/base.html

@@ -19,6 +19,7 @@
     <script type="text/javascript">
       var l_img_broken_msg = "{{ _('Image could not be loaded.') }}";
       var l_play_media_msg = "{{ _('Click to play media') }}";
+      var l_play_media_author = "{{ _('uploaded by {author}') }}";
     </script>
   	<script src="{{ STATIC_URL }}cranefly/js/cranefly.js"></script>{% block javascripts %}{% endblock %}
     {{ hook_append_extra|safe }}