Geek Answers Handbook

Iframe Inside Iframe. It can be done?

We have a link to the video (vimeo) that we would like to see for our users.

Each video is followed by a short questionnaire.

Our intention is not to make the questionnaire visible to the user until the user clicks it to view it.

I can only think of embedding the code below inside another iframe to hide the link.

Is it possible?

Is there an alternative approach to this?

<!DOCTYPE HTML> <html> <head> <meta name="google" value="notranslate" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Dog Smoking</title> <style type="text/css"> body { padding-top:0; padding-bottom:0; padding-left:0; padding-right:0; margin-top:0; margin-bottom:0; margin-left:0; margin-right:0; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="javascript/froogaloop.js"></script> <script src="javascript/froogaloop.min.js"></script> <script type="text/javascript"> var iframe = $('#player1')[0], player = $f(iframe), status = $('.status'); // When the player is ready, add listeners for pause, finish, and playProgress player.addEvent('ready', function() { status.text('ready'); player.addEvent('pause', onPause); player.addEvent('finish', onFinish); player.addEvent('playProgress', onPlayProgress); }); // Call the API when a button is pressed $('button').bind('click', function() { player.api($(this).text().toLowerCase()); }); function onPause(id) { status.text('paused'); } function onFinish(id) { status.text('finished'); } function onPlayProgress(data, id) { status.text(data.seconds + played'); } player.addEvent('ready', function() { status.text('ready'); $("#survey_button").show(); // <-- or whatever }); </script> </head> <body> <iframe src="http://player.vimeo.com/video/4644119?api=1" width="400" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <a href="http://show.aspx?testid=27#activate" target="target-iframe" onclick="frames['target-iframe'].document.getElementById('activate') .scrollIntoView();return false">Click</a> </body> </html>
+6
source share
2 answers

I would use the JS API for video and use the event callbacks built into the player to make the questionnaire visible.

== UPDATE ==

Good - so the link is a step-by-step example of how to enable JS controls and player callbacks. But ... here we go ..

step 1 is to add "? api = 1" after your initial embed code.

step 2 - upload your Froogaloop library so you can listen to events ...

step 3 will be to set up a callback to handle any event you want to listen to ... The example to the right of this page is fantastic:

 var iframe = $('#player1')[0], player = $f(iframe), status = $('.status'); // When the player is ready, add listeners for pause, finish, and playProgress player.addEvent('ready', function() { status.text('ready'); player.addEvent('pause', onPause); player.addEvent('finish', onFinish); player.addEvent('playProgress', onPlayProgress); }); // Call the API when a button is pressed $('button').bind('click', function() { player.api($(this).text().toLowerCase()); }); function onPause(id) { status.text('paused'); } function onFinish(id) { status.text('finished'); } function onPlayProgress(data, id) { status.text(data.seconds + played'); }

So, depending on when you want your survey to show, you can just click on one of them ...

 player.addEvent('ready', function() { status.text('ready'); $("#survey_button").show(); // <-- or whatever });

has the meaning?

============= OTHER UPDATE =================

here's a working fiddle: http://jsfiddle.net/QkGRd/10/ . You might want to read a little about resource investing and how jsfiddle works.

+2
source

TL answer DR

Yes, you can have an iframe inside an iframe. Although this is generally not a good idea in terms of performance.

0
source

More articles:


All Articles