You are not logged in.

inline video players - how to resize iframe dynamically

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Umalo

Professional

  • "Umalo" started this thread

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

1

Monday, May 16th 2016, 10:43pm

inline video players - how to resize iframe dynamically

How to change size of the video onresize An inline videoplayer using onresize event?
(start e.g. youtube video and change down browser window size. You see that size of the video is set only when player is being prepared.)
As it is Iframe in html of Textfield and size has to be the same as textfield don't know how to dynamically change Iframe width and height while video is playing.

Reregistering iframe to html with new size (on resize event) is working also fine but is starting video from beggining! And is making also switch to FS not fine as it register new size and also start is again. I could check if FS (onenterfullscreen) and maybe control this but start from beggining is problematic.

Source code

 
1

txtadd(iframecode, '[iframe width="',get(layer[vimeo_plugin].width),'" height="',get(layer[vimeo_plugin].height),'" src="//player.vimeo.com/video/','%1','?',get(vimeo_settings.parameters),' frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen][/iframe]');

Has anybody good working solution or idea on how to change only iframe width and height (to match new textfield size) with continued video playing?

Timescale

Trainee

Posts: 120

Location: Netherlands

Occupation: Archaeologist, Timescale R&D

  • Send private message

2

Monday, May 16th 2016, 11:17pm

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 :

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13

<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..

Umalo

Professional

  • "Umalo" started this thread

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

3

Tuesday, May 17th 2016, 11:34pm

Thank you Timescale. That was right direction. Got it now working with style based sizing and Iframe ID *thumbsup*

Meerdat

Beginner

Posts: 15

  • Send private message

4

Friday, March 24th 2017, 6:27pm

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:

Source code

 
1
2
3
4
5
6

<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:

Source code

 
1
2

<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:

Source code

 
1

<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?

Meerdat

Beginner

Posts: 15

  • Send private message

5

Sunday, March 26th 2017, 2:51pm

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...). *smile*

Umalo

Professional

  • "Umalo" started this thread

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

6

Sunday, March 26th 2017, 2:57pm

Source code

 
1

var calcValX = (krpano.stagewidth * 0,8);

Meerdat

Beginner

Posts: 15

  • Send private message

7

Sunday, March 26th 2017, 3:41pm

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!!

Meerdat

Beginner

Posts: 15

  • Send private message

8

Sunday, March 26th 2017, 4:44pm

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! *squint*

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

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.

Similar threads