diff --git a/resources/js/Components/Livestream/VideoJsPlayer.vue b/resources/js/Components/Livestream/VideoJsPlayer.vue
index f9e8df5..a40591e 100644
--- a/resources/js/Components/Livestream/VideoJsPlayer.vue
+++ b/resources/js/Components/Livestream/VideoJsPlayer.vue
@@ -14,6 +14,17 @@ import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
 import 'videojs-hotkeys';
 
+
+/* --- ADD: Native HLS detection for Apple browsers (minimal, additive) --- */
+const __isIOSLike__ =
+  /iP(hone|od|ad)/.test(navigator.platform) ||
+  /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+  (/Macintosh/.test(navigator.userAgent) && 'ontouchend' in document);
+
+const __isSafari__ = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+const __useNativeHls__ = __isIOSLike__ || __isSafari__;
+/* --- END ADD --- */
+
 // Make videojs available globally for plugins that require it
 window.videojs = videojs;
 
@@ -255,7 +266,26 @@ const initializePlayer = async () => {
     }
 
     // Create player instance
-    player = videojs(videoPlayer.value, options);
+    
+// --- ADD: Prioritize native HLS on iOS/Safari without changing original options ---
+try {
+  if (typeof __useNativeHls__ !== 'undefined' && __useNativeHls__) {
+    if (typeof options !== 'undefined' && options) {
+      options.techOrder = ['html5'];
+      if (options.html5 && options.html5.vhs) {
+        options.html5.vhs.overrideNative = false;
+      } else {
+        options.html5 = options.html5 || {};
+        options.html5.vhs = options.html5.vhs || {};
+        options.html5.vhs.overrideNative = false;
+      }
+    }
+  }
+} catch (e) {
+  // no-op
+}
+// --- END ADD ---
+player = videojs(videoPlayer.value, options);
 
     // Firefox-specific error handling
     const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
diff --git a/resources/js/Pages/RecordingPlayer.vue b/resources/js/Pages/RecordingPlayer.vue
index db2839a..5bd8b19 100644
--- a/resources/js/Pages/RecordingPlayer.vue
+++ b/resources/js/Pages/RecordingPlayer.vue
@@ -89,6 +89,18 @@ import 'video.js/dist/video-js.css';
 import 'videojs-contrib-quality-levels';
 import '@silvermine/videojs-chromecast/dist/silvermine-videojs-chromecast.css';
 
+
+/* --- ADD: Native HLS detection for Apple browsers (minimal, additive) --- */
+const __isIOSLike__ =
+  /iP(hone|od|ad)/.test(navigator.platform) ||
+  /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+  (/Macintosh/.test(navigator.userAgent) && 'ontouchend' in document);
+
+const __isSafari__ = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+const __useNativeHls__ = __isIOSLike__ || __isSafari__;
+/* --- END ADD --- */
+
+
 // Make videojs available globally for plugins
 window.videojs = videojs;
 
@@ -491,7 +503,26 @@ const initializePlayer = async () => {
     };
     
     // Initialize Video.js player
-    player = videojs(videoPlayer.value, options, function() {
+    
+// --- ADD: Prefer native HLS on iOS/Safari without changing original options ---
+try {
+  if (typeof __useNativeHls__ !== 'undefined' && __useNativeHls__) {
+    if (typeof options !== 'undefined' && options) {
+      options.techOrder = ['html5'];
+      if (options.html5 && options.html5.vhs) {
+        options.html5.vhs.overrideNative = false;
+      } else {
+        options.html5 = options.html5 || {};
+        options.html5.vhs = options.html5.vhs || {};
+        options.html5.vhs.overrideNative = false;
+      }
+    }
+  }
+} catch (e) {
+  // no-op
+}
+// --- END ADD ---
+player = videojs(videoPlayer.value, options, function() {
         // Player is ready
         console.log('Video.js player ready');