How can I maintain webplayer aspect ratio on a web page using CSS

Question

I have browsed the CSS forums but nothing that they suggest for maintaining aspect ratios of images and divs seem to work? I want the player to scale fluidly if the user scales the browser window.

Has anyone ever done this? I find it difficult to believe nobody has ever tried using the webplayer on a fluid webpage layout.

Note: My game GUI code works fine, its the proportions of the overall Unity window that I want to maintain. (ie even if the window contained nothing it should still be 4:3)

In my javascript file I have tried using:

 unityObject.embedUnity("unityPlayer", "http://myGame.unity3d", "100%", "100%",params);

but proportions are lost. And if I do a fixed pixel size then obviously the Unity window wont scale to fir the browser window.

Answer 1

Answer by tomekkie2 · Jun 07, 2012 at 02:13 PM

Most common flexible layout is the full browser layout and that is easy and there are plenty of examples for that in the web. In your case you can setup the special javascript functions:

body onload:

calculate the browser window size, set the css dimensions, embedUnity with "100%", "100%" in the containing div tags
1. window.onresize:
recalculate the browser window size, set new css dimensions for the div tags containing the WebPlayer - in case of resize event

Add comment · Show 1 · Share

tomekkie2 · Jun 15, 2012 at 07:09 PM 0

Share

Go to see this working: http://virtualplayground.d2.pl/WP/?p=367

How can I maintain webplayer aspect ratio on a web page using CSS

1 Reply

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions