Sie sind nicht angemeldet.

inline video players - how to resize iframe dynamically

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Umalo

Profi

  • »Umalo« ist der Autor dieses Themas

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

1

Montag, 16. Mai 2016, 22:43

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.

Quellcode

 
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

Schüler

Beiträge: 120

Wohnort: Netherlands

Beruf: Archaeologist, Timescale R&D

  • Nachricht senden

2

Montag, 16. Mai 2016, 23:17

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 :

Quellcode

 
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

Profi

  • »Umalo« ist der Autor dieses Themas

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

3

Dienstag, 17. Mai 2016, 23:34

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

Meerdat

Anfänger

Beiträge: 15

  • Nachricht senden

4

Freitag, 24. März 2017, 18:27

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:

Quellcode

 
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:

Quellcode

 
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:

Quellcode

 
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

Anfänger

Beiträge: 15

  • Nachricht senden

5

Sonntag, 26. März 2017, 14:51

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

Profi

  • »Umalo« ist der Autor dieses Themas

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

6

Sonntag, 26. März 2017, 14:57

Quellcode

 
1

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

Meerdat

Anfänger

Beiträge: 15

  • Nachricht senden

7

Sonntag, 26. März 2017, 15:41

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

Anfänger

Beiträge: 15

  • Nachricht senden

8

Sonntag, 26. März 2017, 16:44

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.

Ähnliche Themen