Render YouTube links as embedded media

src/Website.Markdig.Extensions/BlogLinkAndImageRenderer.cs

@@ -3,9 +3,11 @@ using Markdig.Renderers;
 using Markdig.Renderers.Html;
 using Markdig.Renderers.Html.Inlines;
 using Markdig.Syntax.Inlines;
+using System.Text.RegularExpressions;
 
 namespace Website.Markdig.Extensions {
 	public class BlogLinkAndImageRenderer : HtmlObjectRenderer<LinkInline> {
+		private static readonly Regex YoutubeLink = new Regex(@"https://w{0,3}\.?youtu\.?be(?:\.com)?/(?:watch\?v=)?(.*)", RegexOptions.Compiled);
 		private readonly LinkInlineRenderer _baseRenderer;
 
 		public BlogLinkAndImageRenderer(LinkInlineRenderer baseRenderer) {
@@ -34,6 +36,16 @@ namespace Website.Markdig.Extensions {
 			renderer.Write(@"</div>");
 		}
 
+		private bool RenderEmbed(HtmlRenderer renderer, LinkInline link) {
+			if (YoutubeLink.IsMatch(link.Url)) {
+				var youtubeMatch = YoutubeLink.Match(link.Url);
+				renderer.Write($"<iframe src=\"https://www.youtube.com/embed/{youtubeMatch.Groups[1].Value}\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>");
+				return true;
+			}
+
+			return false;
+		}
+
 		private void RenderLink(HtmlRenderer renderer, LinkInline link) {
 			if (link.Url.StartsWith("http") || link.Url.StartsWith("//")) {
 				var htmlAttributes = link.GetAttributes();
@@ -49,7 +61,7 @@ namespace Website.Markdig.Extensions {
 
 			if (link.IsImage)
 				RenderImage(renderer, link);
-			else
+			else if (!RenderEmbed(renderer, link))
 				RenderLink(renderer, link);
 		}
 	}

src/Website/wwwroot/css/blog.scss

@@ -168,4 +168,9 @@
 	.CodeMirror *{
 		transition: none; // Fix weird scroll issue as a result of site-wide transition.
 	}
+}
+
+iframe[src^="https://www.youtube.com/embed/"] {
+	width: 944px;
+	height: 531px;
 }