Custom Video iFrame before quiz results

Riddle’s Business and Enterprise plans 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.

Use YouTube, Vimeo, or MP4 videos (no iFrame required)

Sometimes, we know that you might not have the technical resources to embed a video in an iFrame.

We created this additional option – much easier, and no coding required.

Simple use our media picker to add a YouTube, Vimeo, or MP4 video to a lead form:

Make a lead form.
Select a new ‘image’ block.
Click on ‘image’ icon.

Choose the ‘video/audio’ tab.
Select YouTube, Vimeo, or MP4 videos (more info).
Add your video – and you’re all set.

Example: YouTube video in a lead form

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 (in this case a Youtube 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.

If you know your way around JavaScript and HTML, you should be able to use the example below to build your own super cool video ad integration with Riddle.

(If you like monetizing quizzes, also check our nifty ‘ad tag’ feature – so you can dynamically show ads to each quiz taker above or below your quiz.)

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Video iframe</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body class="text-center">
<!--replace the following code in-between the <video> tags with your own video-->  
      
      <iframe id="riddle-enterprise" width="560" height="315" src="https://www.youtube.com/embed/-7vjAIXIAKE?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     
    <div class="text-center" style="margin:20px;">
      <p class="temptext">Calculating your test results....</p>
      <a class="btn btn-primary btn-continue">Continue</a>
    </div>
    <script>
      $(document).ready(function() {
        $(".btn-continue").hide();
        setTimeout(function() {
          document.getElementById("riddle-enterprise");
        }, 1000);
      });
      setTimeout(function() {
        $(".temptext").hide();
        $(".btn-continue").show();
        $(".btn-continue").click(function() {
          $("#riddle-enterprise").remove();
          window.parent.postMessage("iframe-complete", "*");
        });
      }, 4000); // 4 sec
    </script>
  </body>
</html>

Video iFrame – live example

That’s enough theory and code for now.

Check out this live example showing our quiz video iFrame in action: