Resize PopUp video maintaining the aspect ratio in flex - actionscript

Question

i have a TitleWindow popup which opens a videoDisplay to play a video when i click on a thumb.What i want is my popup to resize and the video inside it but to maintain its original aspect ratio and not stretch...
any ideas?
Thanks a lot! Here is my popUp:
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
close="CloseWindow(event)" >
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.events.ResizeEvent;
import mx.managers.PopUpManager;
[Bindable]public var mediaServerUrl:String;
[Bindable]public var videoFolder:String;
[Bindable]public var filename:String;
[Bindable]public var comments:String;
private var ns:NetStream;
private var nc:NetConnection;
private var video:Video;
private var meta:Object;
private function ns_onMetaData(item:Object):void {
trace("meta");
meta = item;
// Resize Video object to same size as meta data.
video.width = item.width;
video.height = item.height;
// Resize UIComponent to same size as Video object.
myVid.width = video.width;
myVid.height = video.height;
}
private function fetch_rec():void {
var nsClient:Object = {};
nsClient.onMetaData = ns_onMetaData;
nc = new NetConnection();
nc.connect(null);
ns = new NetStream(nc);
ns.client = nsClient;
video = new Video(myVid.width,myVid.height);
video.attachNetStream(ns);
video.smoothing=true;
myVid.addChild(video);
ns.play(mediaServerUrl+"/"+videoFolder+"/"+filename+".flv");
}
protected function CloseWindow(event:CloseEvent):void
{
ns.close();
nc.close();
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<mx:VideoDisplay id="myVid" visible="true" x="0" bottom="50" width="100%" height="100%"
maintainAspectRatio="true"
autoPlay="true"
creationComplete="fetch_rec()"
playheadUpdate="progBar.setProgress(myVid.playheadTime,myVid.totalTime)"/>
<mx:ProgressBar id="progBar" left="10" right="10" bottom="60" height="10" label="" mode="manual"/>
<s:Label x="10" bottom="30" text="Σχόλια:"/>
<s:Label x="10" bottom="10" text="{comments}"/></s:TitleWindow>
to call this popup i do:
protected function launchPopUp(event:MouseEvent):void
{
if(list.selectedItem){
win = new ViewVideoPopUp();
win.width = this.width;
win.height = this.height;
//give what is needed to play the video selected
win.videoFolder = videoFolder; // the video's folder name
win.mediaServerUrl = mediaServerUrl; // the media server url
win.filename = list.selectedItem.filename; // the file to be played
win.comments = list.selectedItem.comments; // the comments left for that
win.title = list.selectedItem.name+" στις "+list.selectedItem.date; //title of the window
this.addEventListener(ResizeEvent.RESIZE, window_resize);
PopUpManager.addPopUp(win,this,true);
PopUpManager.centerPopUp(win);
}
}

Answer 1

EDIT (12/15):
OK, I tried your code and added a method to force the aspect ratio of the video based on the aspect ratio of the parent container. I put a HGroup around the VideoDisplay component, and used that to figure out how the video should be sized. It also centers the video in the popup if the window and video are different sizes.
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
close="CloseWindow(event)" autoLayout="true">
<fx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.events.ResizeEvent;
import mx.managers.PopUpManager;
[Bindable]public var mediaServerUrl:String;
[Bindable]public var videoFolder:String;
[Bindable]public var filename:String;
[Bindable]public var comments:String;
private var ns:NetStream;
private var nc:NetConnection;
private var video:Video;
private var meta:Object;
private function ns_onMetaData(item:Object):void {
trace("meta");
meta = item;
var vidAspectRatio:Number = item.width / item.height;
var titleWindowAspectRatio:Number = vidContainer.width / vidContainer.height;
// Resize Video object to same size as meta data.
if ( vidAspectRatio < titleWindowAspectRatio ) // TitleWindow too wide
{
video.height = vidContainer.height;
video.width = video.height * vidAspectRatio;
}
else if ( vidAspectRatio > titleWindowAspectRatio ) // TitleWindow too tall
{
video.width = vidContainer.width;
video.height = video.width / vidAspectRatio;
}
else // TitleWindow and Video have same aspect ratio and fits just right
{
video.width = vidContainer.width;
video.height = vidContainer.height;
}
// Resize UIComponent to same size as Video object.
myVid.width = video.width;
myVid.height = video.height;
}
private function fetch_rec():void {
var nsClient:Object = {};
nsClient.onMetaData = ns_onMetaData;
nc = new NetConnection();
nc.connect(null);
ns = new NetStream(nc);
ns.client = nsClient;
video = new Video(myVid.width,myVid.height);
video.attachNetStream(ns);
video.smoothing=true;
myVid.addChild(video);
ns.play("../swf/barsandtone.flv");
}
protected function CloseWindow(event:CloseEvent):void
{
ns.close();
nc.close();
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<s:HGroup id="vidContainer" verticalAlign="middle" horizontalAlign="center" height="100%" width="100%" bottom="50" >
<mx:VideoDisplay id="myVid" visible="true"
autoPlay="true"
creationComplete="fetch_rec()"
playheadUpdate="progBar.setProgress(myVid.playheadTime,myVid.totalTime)"/>
</s:HGroup>
<mx:ProgressBar id="progBar" left="10" right="10" bottom="60" height="10" label="" mode="manual"/>
<s:Label x="10" bottom="30" text="Σχόλια:"/>
<s:Label x="10" bottom="10" text="{comments}"/>
</s:TitleWindow>