Video is inserted into the site via a frame with vimeo. Width - 100%. How to set the width so that when you change the width of the window, the height of the video changes proportionally?

    1 answer 1

    It can be so. Long known method. Bootstrap used

    .video { height: 0; position: relative; padding-bottom: 56.25%; } .video iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 
     <div class="video"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe> </div>

    Demo

    UPD. How it works? padding-bottom in percent will be calculated relative to the width of the block. Those. If padding-bottom is 100% , well, height: 0 , then the total height will be equal to the width. Get a square)

    • Thank. Can you explain the amount of padding? (padding-bottom: 56.25%;) - Frontender
    • one
      @ Victor Pavlov, video width * 0.5625 = video height, such padding allows you to see all videos in height and without a void at the bottom - MasterAlex
    • @ Victor Pavlov I will add how it is considered. If the video is 16/9, then 9/16 * 100 = 56.25. Also with 4/3 - 3/4 * 100 = 75. - inferusvv