Fancier youtube player.

static/cranefly/css/cranefly.css

@@ -830,6 +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 .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}
 .markdown .emoji,.markdown article .emoji{background:none;border-radius:0;margin:0;vertical-align:middle}

static/cranefly/css/cranefly/markdown.less

@@ -90,6 +90,46 @@
     margin: (@baseLineHeight / 2) 0px;
   }
 
+  .media-border {
+    border-radius: @baseBorderRadius;
+  	display: inline-block;
+  	overflow: hidden;
+    margin: (@baseLineHeight / 2) 0px;
+
+    .media-thumbnail {
+    	width: 480px;
+    	height: 360px;
+
+    	text-align: center;
+
+    	a {
+    		background-color: fadeOut(@black, 20%);
+    		border-radius: @fontSizeSmall;
+    		display: inline-block;
+    		margin-top: 120px;
+    		padding: @paddingLarge;
+
+	    	color: @grayLighter;
+	    	text-align: center;
+	    	text-shadow: 0px 1px 1px @black;
+
+	    	&:hover, &:active {
+	    		color: @white;
+	    		text-shadow: 0px 0px 5px @grayLighter,
+	    								 0px 1px 1px @black;
+	    	}
+
+	    	.icon-youtube-sign {
+	    		display: block;
+	    		clear: both;
+
+	    		font-size: @baseFontSize * 6;
+	    		text-decoration: none;
+	    	}
+    	}
+    }
+  }
+
   // Blocks margins
   pre, blockquote, iframe {
     margin-top: @baseLineHeight;

static/cranefly/js/cranefly.js

@@ -102,25 +102,20 @@ function EnhancePostsMD() {
     // Automagically turn links into players
     var players = new Array();
     $('.markdown.js-extra').each(function() {
-      var post_players = 0;
       $(this).find('a').each(function() {
-        match = link2player($.trim($(this).text()));
-        if (match && $.inArray(match, players) == -1 && players.length < 16 && post_players < 4) {
-          players.push(match);
-          post_players ++;
-          $(this).replaceWith(match);
-        }
+        link2player(this, $.trim($(this).text()));
       });
     });
   });
 }
 
 // Turn link to player
-function link2player(link_href) {
+function link2player(element, link_href) {
   // Youtube link
   var re = /watch\?v=((\w|-)+)/;
   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>';
   }
 
@@ -128,6 +123,7 @@ function link2player(link_href) {
   var re = /watch\?feature=player_embedded&v=((\w|-)+)/;
   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>';
   }
 
@@ -140,13 +136,15 @@ function link2player(link_href) {
     media_url[2] = 0;
     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
-  var re = /youtu.be\/(([A-Za-z0-9]|-)+)/;
+  var re = /youtu.be\/(([A-Za-z0-9]|_|-)+)/;
   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>';
   }
 
@@ -154,13 +152,30 @@ function link2player(link_href) {
   var re = /vimeo.com\/([0-9]+)/;
   if (re.test(link_href)) {
     media_url = link_href.match(re);
-    return '<iframe src="http://player.vimeo.com/video/' + media_url[1] + '?color=CF402E" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
+    return $(element).replaceWith('<iframe src="http://player.vimeo.com/video/' + media_url[1] + '?color=CF402E" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
   }
 
   // No link
   return false;
 }
 
+// Youtube player
+function youtube_player(element, media_url, startfrom) {
+  if (typeof startfrom != 'undefined') {
+    player_url = 'http://www.youtube.com/embed/' + media_url + '?start=' + startfrom + '&amp;autoplay=1';
+  } else {
+    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>');
+    return false;
+  });
+  $(element).replaceWith(media_element);
+  return true;
+}
+
 // Ajax: Post votes
 $(function() {
   $('.post-rating-actions').each(function() {

templates/cranefly/base.html

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