Use media

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

Adding images / videos

Any media you add to the API payload will be downloaded and copied to the Riddle file server. This ensure 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)

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 images/videos slow down the building process and our servers. To ensure a smooth experience, we have set a limit of 10 images per riddle. If you need more images, 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

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

PropertyRequiredTypeDescription
type✓stringSet to Image or Video
url✓stringThe URL of the media you want to add
altTagstringThe alt tag of the media (for accessibility and SEO)
attributionTextstringThe attribution text of the media (e.g. photographer name)
attributionUrlstringA link to the source of the media (e.g. photographer website or profile)
backgroundColorstringA CSS color code (e.g. #000000 or rgba(0,0,0,0.5)) to use as background color for the media
overlayColorstringA 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)"
    }
}

Adding social media content

The following social media content types are supported:

  • YouTube videos
  • Vimeo videos
  • X (formerly Twitter) posts

Add a YouTube video

PropertyRequiredTypeDescriptionDefault
type✓stringSet to YouTube
videoId✓stringThe YouTube video ID (the part after v= in the URL)
autoplaybooleanSet to true to enable autoplay, or false to disable it.false
loopbooleanSet to true to enable looping, or false to disable it.true
controlsbooleanSet 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

PropertyRequiredTypeDescriptionDefault
type✓stringSet to Vimeo
videoId✓stringThe Vimeo video ID (the part after the last / in the URL)
autoplaybooleanSet to true to enable autoplay, or false to disable it.false
loopbooleanSet to true to enable looping, or false to disable it.true
controlsbooleanSet 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

PropertyRequiredTypeDescriptionDefault
type✓stringSet to X
url✓stringThe 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"
    }
}
Table of Contents