I am currently developing a video editing tool and facing a challenge in maintaining the aspect ratio of `16:9` when resizing the screen both horizontally and vertically. While I have successfully achieved the expected behavior for horizontal resizing and vertical downsizing, I am encountering difficulties with vertical upsizing as shown here. Below is the JavaScript code snippet used to calculate the height of the video for resizing:
const calculateHeight = () => {
// Obtain references to 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 element where window height should be applied
const mainSection = document.querySelector('.insert-level-container');
// Access video elements
const editor = document.querySelector('.mesh__insert-editor-container');
const video = document.querySelector('.mesh__insert-editor-video-container');
// Calculate the height of the main section based on window dimensions minus the heights of other elements
if(mainSection !== null) {
mainSection.style.height = (window.innerHeight - header.offsetHeight - meshTopBar.offsetHeight - footer.offsetHeight) + 'px';
}
// Set the minimum height for the video
video.style.minHeight = ((video.offsetWidth * 9) / 16) + 'px';
// Resize video if its height exceeds that of the main section
if(video.offsetHeight + 115 > mainSection.offsetHeight) {
video.style.minHeight = video.offsetHeight - 1 + 'px';
editor.style.maxWidth = video.offsetHeight * 16 / 9 + 'px';
} else {
// Logic for vertical resizing should be implemented here
}
}
The relevant CSS styles for these elements are:
.mesh__insert-editor-container {
margin-left: auto;
margin-right: auto;
}
.mesh__insert-editor-video-container {
position: relative;
width: 100%:
}
As for the HTML structure:
<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>
This code calculates the height of all elements on the page, subtracts their total from the window height to determine the main section's height, and adjusts the video size accordingly. However, I need assistance with scenarios where vertical resizing is required to upscale the video smoothly instead of abrupt changes as observed here.
If you have any suggestions or better alternatives to solve this issue, please feel free to share. Thank you!