diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
index 020b2e6f..b33ced5f 100644
--- a/src/components/VideoPlayer.tsx
+++ b/src/components/VideoPlayer.tsx
@@ -143,6 +143,8 @@ export function VideoPlayer({ src, poster, className }: VideoPlayerProps) {
         className="w-full max-h-[70vh] cursor-pointer"
         playsInline
         preload="metadata"
+        {...({ 'webkit-playsinline': 'true' } as any)}
+        {...({ 'x-webkit-airplay': 'allow' } as any)}
         onClick={handleVideoClick}
         onPlay={() => { setIsPlaying(true); setHasStarted(true); }}
         onPause={() => setIsPlaying(false)}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e498c42a..e1cbd781 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -7,7 +7,6 @@ export function cn(...inputs: ClassValue[]) {
 
 /**
  * Sticky header class for pages inside MainLayout.
- * On mobile, page headers scroll naturally with the content.
- * On desktop (sidebar breakpoint) they stick to the top of the viewport.
+ * Headers stick to the top of the viewport on all screen sizes.
  */
-export const STICKY_HEADER_CLASS = 'sidebar:sticky sidebar:top-0';
+export const STICKY_HEADER_CLASS = 'sticky top-0';
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index be071b8d..dc3e14e5 100644
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -38,7 +38,7 @@ export function SettingsPage() {
         </div>
 
         {/* Tab navigation */}
-        <div className="flex border-b border-border">
+        <div className={cn(STICKY_HEADER_CLASS, 'flex border-b border-border bg-background/95 backdrop-blur-md z-10')}>
           <SettingsTab to="/settings/profile" label="Profile" active={activeSection === 'profile'} />
           <SettingsTab to="/settings/content" label="Content" active={activeSection === 'content'} />
           <SettingsTab to="/settings/advanced" label="Advanced" active={activeSection === 'advanced'} />