consolidate youtube embed code to a partial view

TASVideos/Pages/Forum/Topics/Index.cshtml

@@ -81,33 +81,7 @@
 {
 	<div condition="@(!string.IsNullOrWhiteSpace(Model.EncodeEmbedLink))" class="d-flex justify-content-center">
 		<div class="col-12 col-lg-6">
-			@*Boilerplate bootstrap stuff *@
-			<div class="ratio ratio-16x9">
-				<div id="ytplayer"></div>
-			</div>
-			<script>
-				const youtubeScriptId = 'youtube-api';
-				let youtubeScript = document.getElementById(youtubeScriptId);
-				let player;
-				@*Loads the scripts which run the Youtube Player API asynchronously*@
-				if (youtubeScript === null) {
-					let tag = document.createElement('script');
-					let firstScript = document.getElementsByTagName('script')[0];
-
-					tag.src = 'https://www.youtube.com/iframe_api';
-					tag.id = youtubeScriptId;
-					firstScript.parentNode.insertBefore(tag, firstScript);
-				}
-				@*Populates the youtube player after the API script is ready*@
-				if (!player) {
-					window.onYouTubeIframeAPIReady = () => {
-						player = new YT.Player('ytplayer', {
-							videoId: "@Model.EncodeEmbedLink!.Split('/').Last()"
-						});
-					}
-				}
-			</script>
-			<a href="@Model.EncodeEmbedLink">(Link to video)</a>
+			<partial name="_YoutubeEmbed" model="Model.EncodeEmbedLink" />
 		</div>
 	</div>
 	<card class="mt-2 mb-2">

TASVideos/Pages/Shared/_YoutubeEmbed.cshtml

@@ -0,0 +1,29 @@
+@model string
+
+@*Boilerplate bootstrap stuff *@
+<div class="ratio ratio-16x9">
+	<div id="ytplayer"></div>
+</div>
+<script>
+	const youtubeScriptId = 'youtube-api';
+	let youtubeScript = document.getElementById(youtubeScriptId);
+	let player;
+	@*Loads the scripts which run the Youtube Player API asynchronously*@
+	if (youtubeScript === null) {
+		let tag = document.createElement('script');
+		let firstScript = document.getElementsByTagName('script')[0];
+				
+		tag.src = 'https://www.youtube.com/iframe_api';
+		tag.id = youtubeScriptId;
+		firstScript.parentNode.insertBefore(tag, firstScript);
+	}
+	@*Populates the youtube player after the API script is ready*@
+	if (!player) {
+		window.onYouTubeIframeAPIReady = () => {
+			player = new YT.Player('ytplayer', {
+				videoId: "@Model!.Split('/').Last()"
+			});
+		}
+	}
+</script>
+<a href="@Model">(Link to video)</a>

TASVideos/Pages/Submissions/View.cshtml

@@ -60,33 +60,7 @@
 
 <row class="mt-2">
 	<div class="col-lg-6" condition="hasEncode">
-		@*Boilerplate bootstrap stuff *@
-		<div class="ratio ratio-16x9">
-			<div id="ytplayer"></div>
-		</div>
-		<script>
-			const youtubeScriptId = 'youtube-api';
-			let youtubeScript = document.getElementById(youtubeScriptId);
-			let player;
-			@*Loads the scripts which run the Youtube Player API asynchronously*@
-			if (youtubeScript === null) {
-				let tag = document.createElement('script');
-				let firstScript = document.getElementsByTagName('script')[0];
-				
-				tag.src = 'https://www.youtube.com/iframe_api';
-				tag.id = youtubeScriptId;
-				firstScript.parentNode.insertBefore(tag, firstScript);
-			}
-			@*Populates the youtube player after the API script is ready*@
-			if (!player) {
-				window.onYouTubeIframeAPIReady = () => {
-					player = new YT.Player('ytplayer', {
-						videoId: "@Model.Submission.EncodeEmbedLink!.Split('/').Last()"
-					});
-				}
-			}
-		</script>
-		<a href="@Model.Submission.EncodeEmbedLink">(Link to video)</a>
+		<partial name="_YoutubeEmbed" model="Model.Submission.EncodeEmbedLink" />
 	</div>
 	<div class="@(hasEncode ? "col-lg-6" : "col-lg-12")">
 		<div class="alert alert-@(statusColor)" role="alert">

TASVideos/TASVideos.csproj

@@ -108,6 +108,9 @@
 		<Content Update="Pages\Shared\Components\FirstEditionTas\Default.cshtml">
 			<Pack>$(IncludeRazorContentInPack)</Pack>
 		</Content>
+		<Content Update="Pages\Shared\_YoutubeEmbed.cshtml">
+		  <Pack>$(IncludeRazorContentInPack)</Pack>
+		</Content>
 		<Content Update="Pages\Shared\_Diff.cshtml">
 		  <Pack>$(IncludeRazorContentInPack)</Pack>
 		</Content>