Fixed video rendering issue on Iphone on landing page

Author: binon

LearningHub.Nhs.WebUI/Controllers/MediaController.cs

@@ -38,9 +38,10 @@ public MediaController(IWebHostEnvironment hostingEnvironment, ILogger<MediaCont
         /// </summary>
         /// <param name="playBackUrl">The playBackUrl.</param>
         /// <param name="token">The token.</param>
+        /// <param name="origin">The orgin node.</param>
         /// <returns>The <see cref="IActionResult"/>.</returns>
         [Route("Media/MediaManifest")]
-        public IActionResult MediaManifest(string playBackUrl, string token)
+        public IActionResult MediaManifest(string playBackUrl, string token, string origin = "*")
         {
             try
             {
@@ -58,7 +59,8 @@ public IActionResult MediaManifest(string playBackUrl, string token)
                     Content = modifiedTopLeveLManifest,
                     ContentType = @"application/vnd.apple.mpegurl",
                 };
-                this.Response.Headers.Append("Access-Control-Allow-Origin", "*");
+
+                this.Response.Headers.Append("Access-Control-Allow-Origin", origin);
                 this.Response.Headers.Append("X-Content-Type-Options", "nosniff");
 
                 return response;

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/MKIOVideoPlayer.vue

@@ -1,4 +1,4 @@
-<link href="~/css/mkplayer-ui.css" rel="stylesheet" asp-append-version="true" />
+<link href="~/css/mkplayer-ui.css" rel="stylesheet" asp-append-version="true" />
 <template>
     <div>
         <div :id="getPlayerUniqueId" class="video-container"></div>
@@ -223,38 +223,60 @@
         width: 100%;
         margin: auto;
         position: relative;
-        --min-width: 0px; /* default value */
+        min-width: var(--min-width, 0px); /* Default fallback value */
     }
 
     /* Media queries to set different min-width values */
+    @media (min-width: 225px) { /* Non standard for graceful */
+        .video-container {
+            --min-width: 200px;
+        }
+    }
+    @media (min-width: 375px) { /* Non standard for graceful */
+        .video-container {
+            --min-width: 300px;
+        }
+    }
+    @media (min-width: 450px) { /* Non standard for graceful */
+        .video-container {
+            --min-width: 400px;
+        }
+    }
     @media (min-width: 576px) {
         .video-container {
-            --min-width: 576px;
+            --min-width: 500px;
+        }
+    }
+    @media (min-width: 650px) { /* Non standard for graceful */
+        .video-container {
+            --min-width: 600px;
         }
     }
-
     @media (min-width: 768px) {
         .video-container {
-            --min-width: 768px;
+            --min-width: 700px;
         }
     }
-
-    @media (min-width: 992px) {
+    @media (min-width: 850px) { /* Non standard for graceful */
         .video-container {
-            --min-width: 992px;
+            --min-width: 800px;
         }
     }
-
+    @media (min-width: 992px) { 
+        .video-container {
+            --min-width: 900px;
+        }
+    }   
     @media (min-width: 1024px) {
         .video-container {
             --min-width: 1024px;
         }
     }
 
     /* Applying min-width to the video container using the CSS variable */
-    /*.video-container {
+    .video-container {
         min-width: var(--min-width) !important;
-    }*/
+    }
 
     /* Targeting specific div with dynamic ID pattern */
     [id^="videoContainer_"] {

LearningHub.Nhs.WebUI/Views/Home/_CmsVideo.cshtml

@@ -108,7 +108,7 @@
 
     if (checkIfIphone()) {
         var token = model.videoAsset.azureMediaAsset.authenticationToken;
-        url = '@requestURL'+  "Media/MediaManifest?playBackUrl=" + url + "&token=" + token;
+        url = '@requestURL' + "Media/MediaManifest?playBackUrl=" + url + "&token=" + token + "&origin=" + '@requestURL';
     }
     var subtitleTrack = null;
     if (model.videoAsset.azureMediaAsset && model.videoAsset.closedCaptionsFile) {