Small fixes in markdown player.

static/cranefly/css/cranefly.css

@@ -817,7 +817,7 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{color:#333;text-decoration:n
 .error-page .error-protips{margin-top:40px}.error-page .error-protips .go-back{display:none}
 .error-page .error-protips a:link,.error-page .error-protips a:visited{background-color:#333;border:1px solid #000;border-radius:5px;margin:2px 10px;opacity:.7;filter:alpha(opacity=70);padding:11px 19px;color:#fff;font-weight:bold;text-decoration:none}
 .error-page .error-protips a:hover,.error-page .error-protips a:active{opacity:1;filter:alpha(opacity=100)}
-.markdown,.markdown article{margin:0;overflow:auto}.markdown>:first-child,.markdown article>:first-child{margin-top:0}
+.markdown,.markdown article{margin:0;overflow:visible}.markdown>:first-child,.markdown article>:first-child{margin-top:0}
 .markdown>:last-child,.markdown article>:last-child{margin-bottom:0}.markdown>:last-child img:last-child,.markdown article>:last-child img:last-child{margin-bottom:0}
 .markdown h1,.markdown article h1{font-size:23.8px}
 .markdown h2,.markdown article h2{font-size:21px}
@@ -830,7 +830,8 @@ 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 .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;clear:both}.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 .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 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}

static/cranefly/css/cranefly/markdown.less

@@ -3,7 +3,7 @@
 
 .markdown, .markdown article {
   margin: 0px;
-  overflow: auto;
+  overflow: visible;
 
   &>:first-child {
     margin-top: 0px;
@@ -95,6 +95,11 @@
   	display: inline-block;
   	overflow: hidden;
     margin: (@baseLineHeight / 2) 0px;
+    clear: both;
+
+    iframe {
+    	margin: 0px;
+    }
 
     .media-thumbnail {
     	width: 480px;

static/cranefly/js/cranefly.js

@@ -167,9 +167,9 @@ function youtube_player(element, media_url, startfrom) {
     player_url = 'http://www.youtube.com/embed/' + media_url + '?autoplay=1';
   }
 
-  var media_element = $('<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()) + '"><i class="icon-youtube-sign"></i>' + l_play_media_msg + '</a></div></div>');
-  media_element.find('.media-thumbnail a').click(function() {
-    $(this).parent().replaceWith('<iframe width="480" height="360" src="' + player_url + '" frameborder="0" allowfullscreen></iframe>');
+  var media_element = $('<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>');
+  $(media_element).find('.media-thumbnail a').click(function() {
+    $(this).parent().replaceWith('<iframe width="480" height="360" src="' + $(this).data('playerurl') + '" frameborder="0" allowfullscreen></iframe>');
     return false;
   });
   $(element).replaceWith(media_element);