diff --git a/docs/docs/api/styles.md b/docs/docs/api/styles.md
index ef39096..ad242b5 100644
--- a/docs/docs/api/styles.md
+++ b/docs/docs/api/styles.md
@@ -49,7 +49,10 @@ The `react-native-video-player` component allows you to customize its appearance
 - **Description**: Styles the background of the seek bar.
 
 ### `thumbnail`
-- **Description**: Styles the video thumbnail shown before playback starts.
+- **Description**: Styles the video thumbnail container shown before playback starts.
+
+### `thumbnailImage`
+- **Description**: Styles the video thumbnail image shown before playback starts.
 
 ### `playButton`
 - **Description**: Styles the start button overlaying the thumbnail.
@@ -81,6 +84,7 @@ const App = () => (
         wrapper: styles.wrapper,
         playControl: styles.playControl,
         seekBarKnob: styles.seekBarKnob,
+        thumbnailImage: styles.thumbnailImage
       }}
     />
   </View>
@@ -96,6 +100,10 @@ const styles = StyleSheet.create({
   seekBarKnob: {
     // ...
   },
+  thumbnailImage: {
+    resizeMode: 'contain',
+    // ...
+  },
 });
 
 export default App;
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 8af36a3..c1043fa 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -29,6 +29,11 @@ const App = () => {
           thumbnail={{
             uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
           }}
+          customStyles={{
+            thumbnailImage: {
+              resizeMode: 'cover',
+            },
+          }}
           // pauseOnPress={true}
           // autoplay={true}
           // repeat={true}
diff --git a/src/Thumbnail.tsx b/src/Thumbnail.tsx
index f4a97a2..3a7422d 100644
--- a/src/Thumbnail.tsx
+++ b/src/Thumbnail.tsx
@@ -20,6 +20,7 @@ interface ThumbnailProps extends StartButtonProps {
   sizeStyles: { height: number; width: number };
   onStart: () => void;
   customStylesThumbnail: CustomStyles['thumbnail'];
+  customStylesThumbnailImage: CustomStyles['thumbnailImage'];
   customStylesPlayButton: CustomStyles['playButton'];
   customStylesPlayArrow: CustomStyles['playArrow'];
 }
@@ -49,12 +50,14 @@ export const Thumbnail = memo(
     sizeStyles,
     onStart,
     customStylesThumbnail,
+    customStylesThumbnailImage,
     customStylesPlayButton,
     customStylesPlayArrow,
   }: ThumbnailProps) => {
     return (
       <ImageBackground
         source={thumbnailSource}
+        imageStyle={customStylesThumbnailImage}
         style={[styles.thumbnail, sizeStyles, style, customStylesThumbnail]}
       >
         <StartButton
diff --git a/src/index.tsx b/src/index.tsx
index 96f2fab..26bf374 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -47,6 +47,7 @@ export interface CustomStyles {
   seekBarKnobSeeking?: StyleProp<ViewStyle>;
   seekBarBackground?: StyleProp<ViewStyle>;
   thumbnail?: StyleProp<ViewStyle>;
+  thumbnailImage?: StyleProp<ImageStyle>;
   playButton?: StyleProp<ViewStyle>;
   playArrow?: StyleProp<ImageStyle>;
   durationText?: StyleProp<TextStyle>;
@@ -146,8 +147,8 @@ const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(
     }, [onEnd, endWithThumbnail, endThumbnail, setIsStarted, setHasEnded]);
 
     const onLayout = useCallback((event: LayoutChangeEvent) => {
-      const { width } = event.nativeEvent.layout;
-      setWidth(width);
+      const { width: containerWidth } = event.nativeEvent.layout;
+      setWidth(containerWidth);
     }, []);
 
     const renderContent = useCallback(() => {
@@ -161,6 +162,7 @@ const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(
             sizeStyles={sizeStyles}
             onStart={_onStart}
             customStylesThumbnail={customStyles.thumbnail}
+            customStylesThumbnailImage={customStyles.thumbnailImage}
             customStylesPlayButton={customStyles.playButton}
             customStylesPlayArrow={customStyles.playArrow}
           />