inline video players - how to resize iframe dynamically

Well, whenever it is unavoidable to use iFrames and when you can't use percentages to fit the frame to it's parent I would try the following.

First of all don't use width="x" and height="y", but use style instead. so style="width:100px;height:80px". Then make sure that the iframe has a name or an ID so you can address the element.

Now perhaps you could imagine an action that is called onresize() that looks a bit like this :

<action name="resizeIframe" type="Javascript" ><![CDATA[


var iFrameID = (args[1]); 
var calcValX = krpano().get(<someKRpanoValue>);
var calcValY = krpano().get(<someOtherKRpanoValue>);


// < now some magic happens and calculates var newWidth and var newHeight >
// now set the new width and height.


document.getElementById(iFrameID).style.width = newWidth + "px";
document.getElementById(iFrameID).style.height = newHeight + "px";


]]></action>

That should, in principle not stop or restart the video and resize the iFrame to whatever you need.. You can test it by using arbitrary values..

Trying to get this to work (to make the iFrame/video responsive). Tried allot, but can't get it to work.

My current javascript code:

<action name="resizeIframe" type="Javascript" ><![CDATA[
var flipje = document.getElementById('flipje');
var calcValX = krpano().get(stagewidth);var calcValY = krpano().get(stageheight);
flipje.style.width = calcValX + "100px";flipje.style.height = calcValY + "100px";
youtubeiframe.style.width = calcValX + "100px";youtubeiframe.style.height = calcValY + "100px";
]]></action>

My iFrame layer:

<layer 
name="youtubeiframe" devices="html5"parent="blok2"url="textfield.swf"html="[iframe id='flipje' style='width:640px;height:360px' src='//player.vimeo.com/video/140038008' frameborder='0' allowfullscreen][/iframe]"width="640"height="360"y="-150"padding="0"align="center"       />

My onresize event:

<events		onresize="resizeIframe();"	/>

My actual question: How to get the iFrame to react "responsive" to resize to it's parent or to fill a % of (let's say) the current stagewidth?

Got something...

____________

var myframe = document.getElementById("myframe");

var calcValX = (krpano.stagewidth - 1);
var calcValY = (krpano.stageheight - 1);

myframe.style.width = calcValX + "px";
myframe.style.height = calcValY + "px";

____________

It seems to react to something but doesn't behave like it want it yet. I would like it to fill around 80% of it's current container.

Something like: layer[blok2].widht - 20% (just the idea...).

Omg... offcourse!! The stagewidth doesn't need a % as long as you use 0.8.

And as long as the width is done, the height goes auto. It still resizes the videobox to the left, but i guess that's something like a "edge" setting.

There is also a white line below the video, since the textfield has no width and height anymore.

But we're getting there! Thanks for the tip Umalo!!

Yes! The align="center" on the textfield plugin caused the weird placement during resize. Removed the alignment, and it worked.

Also managed to link the size to it's parent container. (layer[blok2].width) <- wich has a 80% width.

The white stripe was caused by the fact that the textfield layer had no width and height. I've set width to 100% and height to it's initial iframe height: 360.
_____________________

var myframe = document.getElementById("myframe");

var calcValX = krpano.get("layer[blok2].width");

myframe.style.width = calcValX + "px";
_____________________

So far it seems that it is working. Thanks for starting this topic and the little hind Umalo!

There might be better/cleaner ways to make it relative to a container. Any tips about that are welcome! But for now it works

I'll post the url of the tour as soon as it is finished. If you would like to see how it works in the meanwhile, just PM me.