Potrzebne wsparcie style css

Witam,
brakuje mi wiedzy aby dokończyć to co zacząłem kleić... Tworzę taką niekomercyjną stronkę na której będzie podgląd na gniazdujące bociany.
Mam taki problem: jak zrobić aby większa kamera na stronie dostosowywała się do wielkości okna wypełniając pozostałą szerokość (mała kamerka i czat pod nią zajmują stałą szerkość 300px pozostawały na stałe)

[(http://bociany-online.pl/i.php)]

Rysunek może to lepiej zobrazuje:

Zacznij od czegoś takiego:

<!DOCTYPE html>
<html>
<head>
<style>
BODY {
  display:flex;
  flex-wrap:wrap;
  background-color:yellow;  
}

#lewy, #prawy {
  background-color:red;
  width:200px;
  margin:5px;
}

#prawy {
  background-color:green;
  width:auto;
  flex-grow:1;
}
</style>  
</head>

<body>
  <div id="lewy">lewy</div>
  <div id="prawy">prawy</div>
</body>
</html>

dzięki za chęć pomocy! :)
początek już jest...

Weź sobie ogarnij jakiś kurs bootstrapa i tyle.

Tutaj znajduje się to co udało mi się zrobić ale niestety nie potrafię tego dokończyć: [http://bociany-online.pl/x.php] jedynie czego mi jeszcze brakuje to aby prawy youtube skalował się zachowując proporcje i bez czarnych pasów na górze lub bokach video tak jak tutaj: [http://bociany-online.pl/i.php] tyle że tu z kolei prawa strona jest ok a lewa zła bo się skaluje (jak lewą zrobię na stałe to problemy zaczynają się z prawą...)

Kto mógłby pomóc?