feat: Added code to play embedded youtube and vimeo videos

Merge pull request #318 from DFE-Digital/mab/embededvideo
DFE-Digital · Nov 8, 2023 · 2d65c35 · 2d65c35
2 parents a250eff + cef33b7
commit 2d65c35
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/Childrens-Social-Care-CPD/Contentful/Models/VideoResource.cs b/Childrens-Social-Care-CPD/Contentful/Models/VideoResource.cs
@@ -7,4 +7,5 @@ public class VideoResource : IContent
     public string Id { get; set; }
     public Asset Video { get; set; }
     public Document Transcript {  get; set; }
+    public string EmbeddedSourceUrl { get; set; }
 }
diff --git a/Childrens-Social-Care-CPD/Views/Shared/_VideoResource.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_VideoResource.cshtml
@@ -8,9 +8,29 @@
 
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-three-quarters">
-        <video id="videoPlayer" preload="none">
-            <source src="@Model.Video.File.Url">
-        </video>
+        @if(!string.IsNullOrEmpty(Model.EmbeddedSourceUrl))
+        {
+            if (@Model.EmbeddedSourceUrl.IndexOf("vimeo") > -1)
+            {
+                <iframe width="560" height="315"
+                        title="Vimeo Video"
+                        src="@Model.EmbeddedSourceUrl"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowfullscreen>
+                </iframe>
+            }
+            else
+            {
+                <video name="media" src="@Model.EmbeddedSourceUrl" preload="none"></video>         
+            }
+        }
+        else
+        {
+            <video id="videoPlayer" name="media" preload="none">
+                <source src="@Model.Video.File.Url">
+            </video>
+        }
+
         <details class="govuk-details govuk-!-margin-top-3" data-module="govuk-details">
             <summary class="govuk-details__summary"> <span class="govuk-details__summary-text">View transcript  </span></summary>
             <div class="govuk-details__text">
@@ -19,5 +39,7 @@
                 }
             </div>
         </details>
+
+
     </div>
 </div>