How can I make the video smaller but still maintain its aspect ratio?

Question

css

Video size 700x1000. The dimensions get distorted when I use the tag, it stretches the video to the width of the player and centers the video inside the player. How can I make the video smaller but still maintain the aspect ratio?

Answer 1

Run in html file and see proportion magic:

<style>
*{margin:0;padding:0;}
iframe {border:0}
.iframebox {
    width: 100vw;
    height: 70vw;
}
@media screen and (min-aspect-ratio: 10/7) {
  .iframebox {
    width: 142.8571428571429vh;
    height: 100vh;
  }
}
</style>
<iframe class="iframebox" src="http://www.youtube.com/embed/9G-eLuTuwqc"></iframe>