# How do I set the thumbnail for a video?

**URL:** <https://community.thunkable.com/t/how-do-i-set-the-thumbnail-for-a-video/3483533>\
**Category:** Questions about Thunkable X\
**Tags:** video\
**Created:** [January 16, 2025, 3:57pm UTC](https://community.thunkable.com/t/how-do-i-set-the-thumbnail-for-a-video/3483533 "2025-01-16T15:57:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![patrickocvuis](https://avatars.discourse-cdn.com/v4/letter/p/b9e5f3/32.png) [@patrickocvuis](https://community.thunkable.com/u/patrickocvuis)\
**Post date:** [January 16, 2025, 3:57pm UTC](https://community.thunkable.com/t/how-do-i-set-the-thumbnail-for-a-video/3483533/1 "2025-01-16T15:57:09Z")

</div>

I have a video on the home page of my app, and there is no image showing when I view the app on my phone browser. See the attached image. I’m using the default video component, and it’s pulling the video from Cloudinary. Is there any way to set a default image to show up for a video component?

 ![Home](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/f/3f640df9d760dbb50cd8ad1486c99dfc3dcf89ed.jpeg)

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [January 17, 2025, 9:31am UTC](https://community.thunkable.com/t/how-do-i-set-the-thumbnail-for-a-video/3483533/2 "2025-01-17T09:31:03Z")

</div>

Hello @patrickocvuis , welcome to the community.  
As I shared in a separate support channel, we don’t currently have a way to set a Thumbnail image on the video component, but this is a good suggestion! I’ll pass it on to the team.

If you need an immediate workaround, you could add an image component to the video, and when they click on the image, hide the image and play the video.

Example project: [Thunkable](https://x.thunkable.com/projects/678a20f8339b4196973d3a67/)

---

<div class="post-metadata">

**Author:** ![pacecode](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/pacecode/32/209017_2.png) [@pacecode](https://community.thunkable.com/u/pacecode)\
**Post date:** [January 17, 2025, 9:44am UTC](https://community.thunkable.com/t/how-do-i-set-the-thumbnail-for-a-video/3483533/3 "2025-01-17T09:44:08Z")

</div>

Try this with Web Viewer:

```auto
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Video with Thumbnail</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .video-container {
            position: relative;
            width: 640px;
            height: 360px;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        .video-container video {
            width: 100%;
            height: 100%;
            display: none;
        }
        .thumbnail {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <div 
            class="thumbnail" 
            style="background-image: url('https://via.placeholder.com/640x360');"
            onclick="playVideo()">
        </div>
        <video id="customVideo" controls>
            <source src="https://www.example.com/path-to-video.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>

    <script>
        function playVideo() {
            const video = document.getElementById('customVideo');
            const thumbnail = document.querySelector('.thumbnail');
            thumbnail.style.display = 'none';
            video.style.display = 'block';
            video.play();
        }
    </script>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![patrickocvuis](https://avatars.discourse-cdn.com/v4/letter/p/b9e5f3/32.png) [@patrickocvuis](https://community.thunkable.com/u/patrickocvuis)\
**Post date:** [January 17, 2025, 4:03pm UTC](https://community.thunkable.com/t/how-do-i-set-the-thumbnail-for-a-video/3483533/4 "2025-01-17T16:03:16Z")

</div>

Got it - thank you both for the response! I’ll start with the disappearing image, and try out @pacecode’s solution when I get a bit of time.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [April 17, 2025, 4:03pm UTC](https://community.thunkable.com/t/how-do-i-set-the-thumbnail-for-a-video/3483533/5 "2025-04-17T16:03:30Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
