调整浏览器大小时保持视频的纵横比

Question

I'm working on a Video editing tool, and I need to maintain the 16:9 aspect ratio of the video when resizing the screen horizontally and vertically. So far I got it to work as expected when resizing horizontally, and when resizing down vertically, but can't get it to work when sizing up vertically . The Javascript code I used to calculate the height of the video and resize it is below (notice how the else clause is empty because that's where the code should go):

const calculateHeight = () => {
    // Get the other elements on the page
    const header = document.querySelector('.main-navigation');
    const meshTopBar = document.querySelector('.mesh__top-bar');
    const footer = document.querySelector('.mesh__bottom-bar');
    // Get the section to apply the window height to it
    const mainSection = document.querySelector('.insert-level-container');
    // Get the video elements
    const editor = document.querySelector('.mesh__insert-editor-container');
    const video = document.querySelector('.mesh__insert-editor-video-container');

    // Apply the height to the main section by calculating the window height minus the other elements' height
    if(mainSection !== null) {
      mainSection.style.height = (window.innerHeight - header.offsetHeight - meshTopBar.offsetHeight - footer.offsetHeight) + 'px';
    }

    // This should be the ideal height for the video
    video.style.minHeight = ((video.offsetWidth * 9) / 16) + 'px';

    // If the video height is bigger than the section height (calculated above), then resize it
    if(video.offsetHeight + 115 > mainSection.offsetHeight) {
      video.style.minHeight = video.offsetHeight - 1 + 'px';
      editor.style.maxWidth = video.offsetHeight * 16 / 9 + 'px';
    } else {
      // This is where the logic for the vertical resizing should go
    }
  }

The relevant CSS for these items is:

.mesh__insert-editor-container {
    margin-left: auto;
    margin-right: auto;
}

.mesh__insert-editor-video-container {
    position: relative;
    width: 100%:
}

And the HTML:

<section class="mesh__insert-editor-container flex__one flex-container flex-column horizontally-left-aligned" id="video-main-container">
    <div class="mesh__insert-editor-video-container flex-container horizontally-right-aligned flex-wrap">
        <video class="mesh__insert-editor-video-placeholder"></video>
    </div>
</section>

All this code is:

• Get the height of all the elements on the page, sum them and calculate the main section height by subtracting that height;
• If the video height gets bigger than the section height, I reduce its height by -1px each time the window gets resized, and calculate the new width.

All the above code is giving me this result , which works great for most scenarios, but I need the video to size up when the condition on the if statement is not met. Everything I tried inside the else statement gets "jumpy".

Any better alternatives to solve this would be much appreciated. Thanks all!

Answer 1

The CSS aspect ratio trick might be a good solution: https://css-tricks.com/aspect-ratio-boxes/

The approach takes advantage of a quirk in CSS where padding based on a percentage value will be relative to the element's width. Create a container using this trick, the important bit is this line:

padding-top: calc(9/16 * 100%);

The value is calculating the correct height based on the aspect ratio you want (9 tall over 16 wide in this case) and generating it relative to the width of the element by multiplying by 100% .

With the container maintaining aspect ratio, just place the content inside an absolute positioned inner div and you should be good. This solution is fully responsive at that point.

 * { box-sizing: border-box } .outer-max-width { max-width: 960px; margin: 0 auto; } .aspect-ratio-box { width: 100%; padding-top: calc(9/16 * 100%); position: relative; border: 2px solid red; /* for demo visibility, remove */ } .aspect-ratio-box-content { position: absolute; width: 100%; top: 0; left: 0; border: 2px solid blue; /* for demo visibility, remove */ } .video-placeholder { display: block; width: 100%; height: auto; }

 <div class="outer-max-width"> <div class="aspect-ratio-box"> <div class="aspect-ratio-box-content"> <img class="video-placeholder" src="https://placeimg.com/640/360/nature" /> </div> </div> </div>

Answer 2

Got it to work! I used this amazing CSS-only solution: https://codepen.io/EightArmsHQ/pen/BvNzrm similar to BugsArePeopleToo's suggestion, from eightarmshq:

.content{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  background: #555;
  box-shadow: inset 1vh 1vh 10vh 0 rgba(0,0,0,0.5);
  display: flex;


  box-sizing: border-box;
  border: 25px solid #cecece;
}