0

I am trying to create a quiz that can be embedded on some other website (and is responsive), the same way as a YouTube embed. When the iframe is tapped, I would like it to fit the viewport of the mobile screen. Is this possible and how can I achieve it?

Currently I have tried making a responsive fullscreen Bootstrap modal loading an iframe, but the problem is that we do not control the parent page content, except for a small piece of embeddable code (since this will be embedded, I cannot make any assumptions on libraries that are included in the parent web page etc)

<div>
   <iframe src="http://server/quiz/embed/{{quiz_id}}" style="" frameBorder="0" width="100%" height="768"></iframe>
</div>
Debnath Sinha
  • 1,087
  • 1
  • 12
  • 25

1 Answers1

0

Generally speaking: no. Changing the size of your iframe is a modification to the DOM of the parent site. That's not possible with the embed code you're currently using, as cross-origin restrictions prevent code running within your frame from accessing the parent window.†

Your options are:

  1. Change your embed code. Have your users embed a reference to a dynamically generated Javascript file which sets up cross-domain access (e.g, using window.postMessage), then creates an iframe tag similar to what's currently being embedded.

  2. Go with a different solution entirely. Consider using window.open or <a target="_blank"> to create a "normal" popup window instead; this requires no special setup on your frame.

†: That is, unless it coincidentally happens to be on the same origin as the embedded content. But that's unlikely in the general case.

  • Thanks! Can't I just change the embed code to create a modal instead of granting cross-domain access? Also, how would granting cross domain access allow the inner iframe to enter full screen? For option 2, on the mobile it will open a new window and take the person away from the parent site, and its hard to get back to it unlike on the desktop, so I don't think that would work. – Debnath Sinha May 26 '15 at 18:24
  • @DebnathSinha Granting cross-domain access lets you indirectly run code on the parent page. You can use that access to make any DOM changes you need. –  May 26 '15 at 19:07