Use media

You can add media, such as images, videos, audio, and social media content, to any block and result in your riddle.

Adding images / videos / audio

Any media you add to the API payload will be downloaded and copied to the Riddle file server. This ensures your media is optimized for the web, e.g. by resizing images and converting media to the most efficient and most web-friendly format.

The following media types are supported:

Images (JPG, PNG, GIF)
Videos (MP4)
Audio (MP3)

Other image/video formats may work, but are not officially supported. If you want to use other media types, please contact us at hello@riddle.com.

Example SingleChoice object:

{
    "type": "SingleChoice",
    "title": "What is the capital of France?",
    "items": {
        "Berlin": false,
        "Madrid": false,
        "Paris": true
    },
    "media": "https://example.com/single-choice-image.jpg"
}

Upload limit

Uploading media slows down the building process and our servers. To ensure a smooth experience, we have set a limit of 15 media per riddle. If you need more media, please contact us at hello@riddle.com.

Advanced properties

You can further customize how your media is displayed by:

setting alt tags for accessibility and SEO
setting attribution metadata to credit the source
setting the background or overlay color (Image only)

To do this, convert the media property to an object and add the following properties:

Property	Required	Type	Description
`type`	✓	string	Set to `Image`, `Video`, or `Audio`
`url`	✓	string	The URL of the media you want to add
`altTag`		string	The alt tag of the media (for accessibility and SEO)
`attributionText`		string	The attribution text of the media (e.g. photographer name)
`attributionUrl`		string	A link to the source of the media (e.g. photographer website or profile)
`backgroundColor`		string	Image only. A CSS color code (e.g. `#000000` or `rgba(0,0,0,0.5)`) to use as background color for the media
`overlayColor`		string	Image only. A CSS color code (e.g. `#000000` or `rgba(0,0,0,0.5)`) to use as overlay color for the media

Example object:

{
    "type": "SingleChoice",
    "title": "What is the capital of France?",
    "items": {
        "Berlin": false,
        "Madrid": false,
        "Paris": true
    },
    "media": {
        "type": "Image",
        "url": "https://example.com/single-choice-image.jpg",
        "altTag": "An image showing the Eiffel Tower in Paris",
        "attributionText": "Photo by John Doe",
        "attributionUrl": "https://johndoe.com",
        "backgroundColor": "#000000",
        "overlayColor": "rgba(0,0,0,0.5)"
    }
}

Video-specific properties

Media of type Video supports the following additional properties:

Property	Type	Description	Default
`previewImageUrl`	string	The URL of an image to show before the video is played
`autoplay`	boolean	Set to `true` to enable autoplay, or `false` to disable it.	`false`
`loop`	boolean	Set to `true` to enable looping, or `false` to disable it.	`true`
`controls`	boolean	Set to `true` to show video controls, or `false` to hide them.	`true`

Example object:

{
    "type": "SingleChoice",
    "title": "What is the capital of France?",
    "items": {
        "Berlin": false,
        "Madrid": false,
        "Paris": true
    },
    "media": {
        "type": "Video",
        "url": "https://example.com/single-choice-video.mp4",
        "previewImageUrl": "https://example.com/single-choice-video-preview.jpg",
        "autoplay": false,
        "loop": true,
        "controls": true
    }
}

Audio

Media of type Audio supports the following properties:

Property	Required	Type	Description	Default
`url`	✓	string	The URL of the audio file you want to add
`previewImage`		string	The URL of an image to show alongside the audio player
`autoplay`		boolean	Set to `true` to enable autoplay, or `false` to disable it.	`false`
`loop`		boolean	Set to `true` to enable looping, or `false` to disable it.	`true`

Example object:

{
    "type": "SingleChoice",
    "title": "What is the capital of France?",
    "items": {
        "Berlin": false,
        "Madrid": false,
        "Paris": true
    },
    "media": {
        "type": "Audio",
        "url": "https://example.com/single-choice-audio.mp3",
        "previewImage": "https://example.com/single-choice-audio-preview.jpg",
        "autoplay": false,
        "loop": true
    }
}

The following social media content types are supported:

YouTube videos
Vimeo videos
X (formerly Twitter) posts

Add a YouTube video

Property	Required	Type	Description	Default
`type`	✓	string	Set to `YouTube`
`videoId`	✓	string	The YouTube video ID (the part after `v=` in the URL)
`autoplay`		boolean	Set to `true` to enable autoplay, or `false` to disable it.	`false`
`loop`		boolean	Set to `true` to enable looping, or `false` to disable it.	`true`
`controls`		boolean	Set to `true` to show video controls, or `false` to hide them.	`false`

Example object:

{
    "type": "Content",
    "title": "Welcome to the quiz",
    "description": "This quiz will test your knowledge about France",
    "media": {
        "type": "YouTube",
        "videoId": "dQw4w9WgXcQ",
        "autoplay": false,
        "loop": true,
        "controls": false
    }
}

Add a Vimeo video

Property	Required	Type	Description	Default
`type`	✓	string	Set to `Vimeo`
`videoId`	✓	string	The Vimeo video ID (the part after the last `/` in the URL)
`autoplay`		boolean	Set to `true` to enable autoplay, or `false` to disable it.	`false`
`loop`		boolean	Set to `true` to enable looping, or `false` to disable it.	`true`
`controls`		boolean	Set to `true` to show video controls, or `false` to hide them.	`false`

Example object:

{
    "type": "Content",
    "title": "Welcome to the quiz",
    "description": "This quiz will test your knowledge about France",
    "media": {
        "type": "Vimeo",
        "videoId": "76979871",
        "autoplay": false,
        "loop": true,
        "controls": false
    }
}

Add an X post

Property	Required	Type	Description	Default
`type`	✓	string	Set to `X`
`url`	✓	string	The full URL of the X post, e.g. `https://x.com/username/status/1234567890`

Example object:

{
    "type": "Content",
    "title": "Welcome to the quiz",
    "description": "This quiz will test your knowledge about France",
    "media": {
        "type": "X",
        "url": "https://x.com/username/status/1234567890"
    }
}

Settings ConfigurationLogic settings - Build Riddles

Advanced FeaturesDynamic variables - Build Riddles