Menu
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>
470
After some research I found that you can't nest an iframe inside of an iframe in the same file. Instead what you need to do is add a reference to the child iframe as the src attribute for the parent iframe.
contents() can get both text nodes and HTML elements. That's why one can get document contents of an iframe by using it. Note that the iframe and page have to be on the same domain.
If you create an iframe, your site becomes vulnerable to cross-site attacks. You may get a submittable malicious web form, phishing your users' personal data. A malicious user can run a plug-in. A malicious user can change the source site URL.
Iframes are most often used to embed specific content from one web page — like a video, form, document, or even a full web page — within a different web page. This is a powerful capability in HTML — you can take any content from any website (with permission) and place it on your own site to enhance your content.
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.
147
TL;DR Answer
Yes you can have an iframe inside an iframe. Though it's generally not a good idea in terms of performance.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
