Stick object to another one in HTML

Question

I am dabbling one in making websites and I have faced a problem: I cannot stick #left div so that video's ratio stays 16:9 and space between it and #right doesn't get bigger or lower, when I adjust page size. I need #right 's width to stay constant and space on the left and right side of #left to be immutable. Help me please!

https://youtu.be/iVt1FazAXPQ

"/index.html":

<div id="wrapper">
  <div id="left">
     <div id="video">

     <iframe width="420" height="315"      
     src="https://www.youtube.com/embed/MPd6V-PKAds?controls=0
     &autohide=1&modestbranding=1&playsinline=1&rel=0
     &showinfo=0&theme=light" frameborder="0" allowfullscreen></iframe>

     </div>

     <div id="related"> </div>
  </div>


  <div id="right">
     <div id="ad">

       <img src="advert.png" height="400" width="400"></img>
       <img src="advert.png" height="400" width="200"></img>

     </div>

     <div id="popular"> </div>
  </div>

"style.css":

#wrapper #footer{
width:100%;
background: yellow;
}

#right {
float: right;
min-width: 210px; /*???*/
width: 37%; /*???*/

margin-top: 20px;
margin-left: 10px;
margin-right: 20px;
margin-bottom: 20px;
}

#left {
float: left;
width: 55%; ???
min-width: 250px; ???

margin-top: 20px;
margin-left: 20px;
margin-right: 10px;
margin-bottom: 20px;
}

#ad{
padding: 20px;
box-shadow: 0 0 10px black;
border-radius: 5px;
background: #EEE;
min-width: 220px;
}

#video{
position: relative;
padding-bottom: 56.25%; // 16:9 ratio

box-shadow: 0 0 10px black;
border-radius: 5px;
background: #EEE;
} 

#video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 85%;
}

#related{
margin-top: 20px;
box-shadow: 0 0 10px black;
border-radius: 5px;
background: #EEE;
padding: 20px;  
}

#popular{
margin-top: 20px;
box-shadow: 0 0 10px black;
border-radius: 5px;
background: #EEE;
}