title: How to embed YouTube iframe video 100% full width
body: <p>Just thought someone will be interested in knowing how to embed a YouTube iframe or any 16:9 video (e.g. Twitch live widget, Vimeo etc.)</p>
  
  <p>YouTube usually gives you a fixed size video <code>width="560"</code> <code>height="315"</code>. But usually, people want to embed it as full width so that it looks good and also responsive.</p>
  
  <p>But setting it to 100vw will just mess up the site as it goes out of the container and also the height cannot be determined.</p>
  
  <p>So the iframe has to be 100% width according to its container, which can be done by simply adding <code>width="100%"</code>. But the height is still messed up, setting it to 100% will not work.</p>
  
  <p>And it has to work when viewer changes their screen size, either moving the phone from vertical to horizontal or maximizing windows.</p>