fixed video display on mobile

src/components/Content/index.tsx

@@ -329,12 +329,13 @@ export default function Content({
       
       {/* Render videos from tags that don't appear in content */}
       {videosFromTags.map((video) => (
+        <div key={`tag-video-${video.url}`} className="mt-2 w-full max-w-full overflow-hidden">
           <MediaPlayer
-          key={`tag-video-${video.url}`}
             src={video.url}
-          className="mt-2"
+            className="w-full max-w-full"
             mustLoad={mustLoadMedia}
           />
+        </div>
       ))}
       
       {/* Render audio from tags that don't appear in content */}

src/components/Note/AsciidocArticle/AsciidocArticle.tsx

@@ -1325,10 +1325,10 @@ export default function AsciidocArticle({
                 )
               } else if (media.type === 'video' || media.type === 'audio') {
                 return (
-                  <div key={`tag-media-${cleaned}`} className="my-2">
+                  <div key={`tag-media-${cleaned}`} className="my-2 w-full max-w-full overflow-hidden">
                     <MediaPlayer
                       src={media.url}
-                      className="max-w-[400px]"
+                      className="max-w-full sm:max-w-[400px] w-full"
                       mustLoad={true}
                       poster={media.poster}
                     />

src/components/Note/MarkdownArticle/MarkdownArticle.tsx

@@ -3087,10 +3087,10 @@ export default function MarkdownArticle({
                 )
               } else if (media.type === 'video' || media.type === 'audio') {
                 return (
-                  <div key={`tag-media-${cleaned}`} className="my-2">
+                  <div key={`tag-media-${cleaned}`} className="my-2 w-full max-w-full overflow-hidden">
                     <MediaPlayer
                       src={media.url}
-                      className="max-w-[400px]"
+                      className="max-w-full sm:max-w-[400px] w-full"
                       mustLoad={true}
                       poster={media.poster}
                     />

src/components/VideoPlayer/index.tsx

@@ -57,12 +57,12 @@ export default function VideoPlayer({ src, className, poster }: { src: string; c
         setError(true)
       }}
     >
-      <div ref={containerRef}>
+      <div ref={containerRef} className="w-full max-w-full overflow-hidden">
         <video
           ref={videoRef}
           controls
           playsInline
-          className={cn('rounded-lg max-h-[80vh] sm:max-h-[60vh] border', className)}
+          className={cn('rounded-lg max-h-[80vh] sm:max-h-[60vh] border w-full h-auto max-w-full', className)}
           src={src}
           poster={poster}
           onClick={(e) => e.stopPropagation()}

src/lib/nostr-parser.tsx

@@ -411,7 +411,7 @@ export function renderNostrContent(parsedContent: ParsedNostrContent, className?
               key={index}
               src={element.mediaUrl}
               controls
-              className="max-w-[400px] w-full h-auto rounded-lg my-2 block"
+              className="max-w-full sm:max-w-[400px] w-full h-auto rounded-lg my-2 block"
               preload="metadata"
               onError={(e) => {
                 // Fallback to text if video fails to load