How to fully display a video in a given frame, not just a part?

Question

I'm trying to figure out how software works I am not familiar with. There is an Adobe Flex page that shows a streaming video from a camera in a frame of 240 * 120. If you double click on the video frame you get a new frame which shows the video in size 480 * 240.

The problem is: the smaller frame 240 * 120 only shows the top left part of what is shown in the large video frame, which shows the full video image. The detail is the same.

What I want to achieve is that the full video is shown in the smaller frame as well.

If I search in the software for size 240 and 120 I arrive at a jsp which includes the following css snippet:

.video {
   height = "120", width = "240"
}

I replaced that css snippet with

.video {
   height = "100%", width = "100%"
}

but that didn't make any difference.

Does anybody have a clue?

Thanks in advance!

******* Post scriptum: *******

@Lars: I wrote my question during the weekend from the top of my head. What you suggest I already had implemented. However I discovered that I had applied it to the wrong jsp. I verified through viewing the source code in the browser that the following is deployed:

#intercomIframe {
    position:absolute;
    width:100%;
    height:100%;
    right:60;
    bottom:75;
    z-index:5"  
}

The original values were:

 #intercomIframe {
    position:absolute;
    width:165px;
    height:128px;
    right:60;
    bottom:75;
    z-index:5"  
}

If I doubleclick on the video I get in a flex screen (extension .mxml) with the same video displayed in full. Part of the responsible code for that view:

<components:FilterBar 
  id="filterBar" 
  visible="{enableFiltering}"
>
  <system:VideoSourceControlBox 
    id="videoSourceControl" 
    stationId="{station.id}" 
    autoSelect="true" 
    startSource="showVideo(true)" 
    stopSource="showVideo(false)" 
  />
</components:FilterBar>

<mx:Box 
  width="100%" height="100%" 
  backgroundColor="#e7ebf1" 
  paddingTop="15" paddingBottom="15" 
  paddingRight="15"paddingLeft="15"
>
  <mx:VBox 
    width="100%" height="100%" minHeight="0"
    cornerRadius="8"
    paddingTop="15" paddingBottom="15"
    paddingRight="15" paddingLeft="15"
    borderThickness="1" borderStyle="solid" borderColor="#838383"
  >
    <mx:VBox 
      width="100%" height="100%" 
      id="videoFrameContainer" 
      horizontalAlign="center"
    >
    </mx:VBox>
    <mx:Label 
      id="sourceLabel" 
      text="{_currentSource.name}" 
      width="100%" 
      color="black"
      textAlign="center" 
    />
  </mx:VBox>
</mx:Box>

It was this code that brought me to the idea that I should replace the pixels with percentages, alas without success.

Answer 1

First thing you need to use :(colon) to separate property and value in CSS but you used = (equal to). So change it.

Use below styles to display full video in a frame.

style.css

.video {    
      height: 100%;
      width: 100%;   
    } 

demo.html

<iframe src="video1.mp4" class="video" /> 

Answer 2

(See update at bottom)

The example given isn't valid CSS:

1. Property and value should be separated by a : instead of a =
2. Rules (property-value pair) should be separated by a ; instead of a ,
3. Values shouldn't be wrapped in ' or ". They can simply be left alone

An important thing to remember is that you can't just pass integers as pixel distances; you need to specify the unit, like this for example: 120px.

A second thing is that I'm assuming video is the class name; if it's the tag name the it should be video and not .video.

Summary:

.video /* or 'video' */ {
  height : 100%;
  width : 100%;
}

I don't know if this is causing the problems, because you haven't given us any of the other code. If the rest of the CSS is formatted like this as well that shouldn't work either. And I don't know jsp, but if that works with regular CSS, this shouldn't work.

Update:

Sorry for the late update, I didn't notice you updated the question until now. As I said, I don't know about jsp and any of the other code; I went here for the CSS. I'm sorry I can't help you anymore. The only CSS with a mistake I can fix is z-index:5", which should be z-index:5; (or without a ;), but this is probably just a typo and I'm not even sure if it's relevant.

I think it's better for the understanding of other people to not delete this answer, but I don't think this has any other value anymore.

Answer 3

Use following code to display full screen video

<iframe src="URL here" style="border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%">