jbilcke-hf HF staff commited on
Commit
d708a3a
1 Parent(s): 9b37b82

use playsInline to fix the issue on iOS

Browse files
src/app/interface/video-card/index.tsx CHANGED
@@ -102,18 +102,25 @@ export function VideoCard({
102
  `relative w-full`,
103
  isCompact ? `w-42 h-[94px]` : `aspect-video`
104
  )}>
105
- {videoThumbnailReady && shouldLoadVideo ? <video
106
- ref={ref}
107
- src={video.assetUrl}
108
- className={cn(
109
- `w-full h-full`,
110
- `aspect-video`,
111
- duration > 0 ? `opacity-100`: 'opacity-0',
112
- `transition-all duration-500`,
113
- )}
114
- onLoadedMetadata={handleLoad}
115
- muted
116
- /> : null}
 
 
 
 
 
 
 
117
  <img
118
  src={videoThumbnail}
119
  className={cn(
 
102
  `relative w-full`,
103
  isCompact ? `w-42 h-[94px]` : `aspect-video`
104
  )}>
105
+ {videoThumbnailReady && shouldLoadVideo
106
+ ? <video
107
+ // mute the video
108
+ muted
109
+
110
+ // prevent iOS from attempting to open the video in full screen, which is annoying
111
+ playsInline
112
+
113
+ ref={ref}
114
+ src={video.assetUrl}
115
+ className={cn(
116
+ `w-full h-full`,
117
+ `aspect-video`,
118
+ duration > 0 ? `opacity-100`: 'opacity-0',
119
+ `transition-all duration-500`,
120
+ )}
121
+ onLoadedMetadata={handleLoad}
122
+
123
+ /> : null}
124
  <img
125
  src={videoThumbnail}
126
  className={cn(