420p youtube players by default.

static/cranefly/css/cranefly.css

@@ -830,10 +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:-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 .media-border,.markdown article .media-border{box-shadow:0 0 4px #555;display:inline-block;overflow:hidden;margin:10px 0}.markdown .media-border iframe,.markdown article .media-border iframe{margin:0;margin-bottom:-5px}
+.markdown .media-border .media-thumbnail,.markdown article .media-border .media-thumbnail{background-color:#000;background-position:center center;background-repeat:no-repeat;background-size:cover;width:853px;height:480px;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:159px;padding:14px 21px;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:112px;text-decoration:none}
+.markdown .media-border .media-thumbnail a.movie-title,.markdown article .media-border .media-thumbnail a.movie-title{margin-top:146px}.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

@@ -91,18 +91,23 @@
   }
 
   .media-border {
-    border-radius: @baseBorderRadius;
+    box-shadow: 0px 0px 4px @gray;
   	display: inline-block;
   	overflow: hidden;
     margin: (@baseLineHeight / 2) 0px;
 
     iframe {
-    	margin: -2px 0px;
+    	margin: 0px;
+    	margin-bottom: -5px;
     }
 
     .media-thumbnail {
-    	width: 480px;
-    	height: 360px;
+    	background-color: @black;
+    	background-position: center center;
+    	background-repeat: no-repeat;
+    	background-size: cover;
+    	width: 853px;
+    	height: 480px;
 
     	text-align: center;
 
@@ -110,8 +115,8 @@
     		background-color: fadeOut(@black, 20%);
     		border-radius: @fontSizeSmall;
     		display: inline-block;
-    		margin-top: 120px;
-    		padding: @paddingLarge;
+    		margin-top: 159px;
+    		padding: @baseFontSize (@baseFontSize * 1.5);
 
 	    	color: @grayLighter;
 	    	text-align: center;
@@ -128,12 +133,12 @@
 	    		display: block;
 	    		clear: both;
 
-	    		font-size: @baseFontSize * 6;
+	    		font-size: @baseFontSize * 8;
 	    		text-decoration: none;
 	    	}
 
 		  	&.movie-title {
-		  		margin-top: 120px - @baseFontSize - 2px;
+		  		margin-top: 164px - @baseFontSize - 4px;
 
 		    	strong {
 		    		display: block;

static/cranefly/js/cranefly.js

@@ -116,7 +116,6 @@ function link2player(element, link_href) {
   if (re.test(link_href)) {
     media_url = link_href.match(re);
     return youtube_player(element, media_url[1]);
-    return '<iframe width="480" height="360" src="http://www.youtube.com/embed/' + media_url[1] + '" frameborder="0" allowfullscreen></iframe>';
   }
 
   // Youtube feature=embed
@@ -124,7 +123,6 @@ function link2player(element, link_href) {
   if (re.test(link_href)) {
     media_url = link_href.match(re);
     return youtube_player(element, media_url[1]);
-    return '<iframe width="480" height="360" src="http://www.youtube.com/embed/' + media_url[1] + '" frameborder="0" allowfullscreen></iframe>';
   }
 
   // Youtube embed with start time
@@ -137,7 +135,6 @@ function link2player(element, link_href) {
     if (media_minutes) { media_url[2] += (media_minutes[1] - 0) * 60; }
     if (media_seconds) { media_url[2] += (media_seconds[1] - 0); }
     return youtube_player(element, media_url[1], media_url[2]);
-    return '<iframe width="480" height="360" src="http://www.youtube.com/embed/' + media_url[1] + '?start=' + media_url[2] + '" frameborder="0" allowfullscreen></iframe>';
   }
 
   // Youtube embed
@@ -145,7 +142,6 @@ function link2player(element, link_href) {
   if (re.test(link_href)) {
     media_url = link_href.match(re);
     return youtube_player(element, media_url[1]);
-    return '<iframe width="480" height="360" src="http://www.youtube.com/embed/' + media_url[1] + '" frameborder="0" allowfullscreen></iframe>';
   }
 
   // Vimeo link
@@ -160,20 +156,22 @@ function link2player(element, link_href) {
 }
 
 // Youtube player
-function youtube_player(element, media_url, startfrom) {
+function youtube_player(element, movie_id, startfrom) {
   if (typeof startfrom != 'undefined') {
-    player_url = 'http://www.youtube.com/embed/' + media_url + '?start=' + startfrom + '&amp;autoplay=1';
+    player_url = 'http://www.youtube.com/embed/' + movie_id + '?start=' + startfrom + '&amp;autoplay=1';
   } else {
-    player_url = 'http://www.youtube.com/embed/' + media_url + '?autoplay=1';
+    player_url = 'http://www.youtube.com/embed/' + movie_id + '?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()) + '" class="play-link" data-playerurl="' + player_url + '"><i class="icon-youtube-sign"></i><strong>' + l_play_media_msg + '</strong></a></div></div></div>');
+  // Replace link with fancy image
+  var media_element = $('<div><div class="media-border youtube-player" data-movieid="' + movie_id + '"><div class="media-thumbnail" style="background-image: url(\'http://img.youtube.com/vi/' + movie_id + '/sddefault.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>');
+    $(this).parent().replaceWith('<iframe width="853" height="480" 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",
+  // Fetch title and author name
+  $.getJSON("https://gdata.youtube.com/feeds/api/videos/" + movie_id + "?v=2&alt=json",
             function(data, textStatus, jqXHR) {
               var movie_title = data.entry.title.$t;
               var movie_author = data.entry.author['0'].name.$t