Как полностью отображать видео в данном фрейме, а не только на части?

Я пытаюсь понять, как работает программа, с которой я не знаком. Существует страница Adobe Flex, показывающая потоковое видео с камеры в кадре 240 * 120. Если вы дважды щелкните по видеокадре, вы получите новый кадр, который показывает видео размером 480 * 240.

Проблема в том, что меньший кадр 240 * 120 показывает только верхнюю левую часть того, что показано в большом видеокадре, на котором показано полное видеоизображение. Детали одинаковы.

Что я хочу достичь, так это то, что полное видео также отображается в меньшем кадре.

Если я ищу в программном обеспечении размером 240 и 120, я прихожу к jsp, который включает следующий фрагмент css:

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

Я заменил этот фрагмент css

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

но это не имело никакого значения.

Есть ли у кого-нибудь ключ?

Спасибо заранее!

******* Сообщение scriptum: *******

@Lars: Я написал свой вопрос в выходные дни с моей головы. То, что вы предлагаете, я уже реализовал. Однако я обнаружил, что применил его к неправильному jsp. Я проверил через просмотр исходного кода в браузере, что развертывается следующее:

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

Первоначальные значения:

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

Если я дважды кликнул на видео, я получаю на гибком экране (расширение .mxml) с тем же самым видео, которое отображается полностью. Часть ответственного кода для этого представления:

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

Именно этот код привел меня к мысли, что я должен заменить пиксели процентами, увы, без успеха.

Ответы

Ответ 1

Прежде всего вам нужно знать, что свойство и значение CSS разделены: (двоеточие), и вы использовали = (равный) для этого.

Никуда не уходи... это так просто. Просто измените свой css следующим кодом.

//style.css

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

//demo.html

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

Ответ 2

(см. обновление внизу)

Приведенный пример недействителен CSS:

  • Свойство и значение должны быть разделены символом : вместо =
  • Правила (пара значений свойств) должны быть разделены символом ; вместо ,
  • Значения не должны быть обернуты в ' или ". Их можно просто оставить в покое

Важно помнить, что вы не можете просто передавать целые числа в виде расстояний пикселей; вам нужно указать устройство, например, это: 120px.

Во-вторых, я предполагаю, что video - это имя класса; если это имя тега, оно должно быть video, а не .video.

Резюме:

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

Я не знаю, вызвало ли это проблемы, потому что вы не предоставили нам никакого другого кода. Если остальная часть CSS также отформатирована, это тоже не должно работать. И я не знаю jsp, но если это работает с обычным CSS, это не должно работать.

Update:

Извините за последнее обновление, я не заметил, что вы обновили вопрос до сих пор. Как я уже сказал, я не знаю о jsp и любом другом коде; Я пошел сюда для CSS. Прости, что больше не могу тебе помочь. Единственный CSS с ошибкой, которую я могу исправить, - это z-index:5", который должен быть z-index:5; (или без ;), но это, вероятно, просто опечатка, и я даже не уверен, насколько это актуально.

Я думаю, что лучше понять других людей, чтобы они не удаляли этот ответ, но я не думаю, что у этого уже есть какая-то другая ценность.

Ответ 3

Используйте следующий код для отображения полноэкранного видео

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