An Iframe Inside Iframe. Can this be done?
We have a video (vimeo) link we would like our users to watch.
Each video is followed by a short questionnaire.
Our intent is to not make the questionnaire visible to the user until the user had clicked open the video for viewing.
I can only think of embedding the code below inside another iframe just to hide the link.
Is this 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 + 's 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>
Answer
I would use the JS API for video and use the event callbacks built into the player to make the questionnaire visible.
==UPDATE==
Ok - so that link is a step by step example of how to incorporate the JS controls and callbacks for the player. But... here we go..
step 1 is to add the "?api=1" after your initial embed code.
step 2 is to load their Froogaloop library so you can listen for events...
step 3 would be to set up a callback to handle whatever event you want to listen to... The example right from 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 + 's played');
}
So, depending on when you want your survey to show, you can just tap into one of those...
player.addEvent('ready', function() {
status.text('ready');
$("#survey_button").show(); // <-- or whatever
});
make sense?
============= ANOTHER UPDATE ================
here's a working fiddle: http://jsfiddle.net/QkGRd/10/. You may want to read a bit about embedding resources and how the jsfiddle works as well.