An Iframe Inside Iframe. Can this be done?

Asked 2/4, 2014 at 18:14 Answered 5/1, 2017 at 20:50

Solved javascript jquery html iframe vimeo-api

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>

Fortieth answered 2/4, 2014 at 18:14 Comment(2)

The Same Origin Policy prevents cross-domain communication via iframes. – Calpac 2/4, 2014 at 18:16

Maybe you should try with Ajax and some server-side language? – Acuff 2/4, 2014 at 18:20

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.

Mean answered 2/4, 2014 at 18:26 Comment(4)

Hi, this link is not very intuitive. Do you have a jagged example, please? – Fortieth 2/4, 2014 at 18:49

Thank you very much. Sorry it took me this long to see your change. I checked last night but didn't see anything. Ok, please see updated code above. I can see the video but I can also see the Clicl link. Our hope is to hide that link inside the iframe or somehow make it available after the the user had watched the video. Did I miss something? Please see updated code above. – Fortieth 3/4, 2014 at 13:52

can you please provide a jsfiddle or similar? You will have to edit my code to work with your code... – Mean 3/4, 2014 at 15:53

thank you very much for all your help. Here is the fiddle, jsfiddle.net/QkGRd/1 If the link could only show after the video finishes playing, that would be fantastic. I hope you can assist with the issue. – Fortieth 3/4, 2014 at 16:34

TL;DR Answer

Yes you can have an iframe inside an iframe. Though it's generally not a good idea in terms of performance.

Xantha answered 5/1, 2017 at 20:50 Comment(0)

Recommended topics

Hot tags