How do I set the thumbnail for a video?

Questions about Thunkable
1

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
Home1290×2796 186 KB

1 Like
2

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

4 Likes
3

Try this with Web Viewer:

<!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>
2 Likes
4

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.