Custom Video iFrame before quiz results
Our Team Plan lets you add any video ads or other content with our video iFrame option.
This is a great opportunity to show each user a video before you display their quiz results.
In-quiz iFrame – overview
We recommend you check out our handy ‘How to use our video iframe in your quiz’ blog post – it’s chock full of examples and use cases, from a non-technical perspective.
Please read this first to understand the basic concept of video ads in Riddle.
Video iFrame – technical info
Right, now let’s dive in.
To use our video iFrame to show your video content, you’ll need the following:
- A server where you can upload an html file – The server needs to be SSL secured, meaning the URL of that server needs to start with https://
- A place to host the video – this can be a directory on your server or you can use the embed code from other video hosting services
- Next, create an HMTL file based on the example below.
- Make sure to change the video location as noted in the comments in the code.
The code below does the following:
- It loads the video and displays a message below the video “Calculating your test results…”
- After 4 seconds, that text is replaced with a “Continue” button
- Once the button is pressed, the code sends a message to Riddle to show the result page. “window.parent.postMessage(“iframe-complete””,”*”)
- Now save that HTML file on your server and note down the URL to the file.
- Paste that URL into the iFrame field on Riddle and disable the skip option.
That’s all it takes.
Video iFrame – live example
That’s enough theory and code for now.
Check out this live example showing our quiz video iFrame in action: