It appears that Vimeo displays videos in a similar manner to using the CSS property object-fit: contain. This means the video is shown uncropped with either full height or full width depending on how its aspect ratio compares to the viewport.
However, if the goal is to have the video cover the entire viewport while maintaining its aspect ratio, then the solution lies in utilizing object-fit: cover. This approach will ensure that the whole viewport is covered by the video, with the sides being cropped or the top and bottom depending on the relationship between the video's aspect ratio and the viewport's.
To achieve this effect, a JavaScript function can be employed to dynamically adjust the video size based on the actual viewport dimensions relative to the video's aspect ratio. By calculating the appropriate scale using transform: scale(), the video can be expanded to cover the viewport as needed.
In the provided code snippet, it assumes a 16:9 aspect ratio for the video. While this ratio is common, users may need to determine the exact aspect ratio for different videos if necessary.
The code includes styling elements for a fixed-position outer container containing a div for the video player. The script calculates the scaling factor required to fit the video within the viewport dimensions and updates the video accordingly upon loading or window resizing events.
Note that the code may not run directly as an SO snippet due to potential nested iframes conflicts. However, it has been successfully tested on Edge and Chrome browsers running on Windows 10, along with various emulators, without issues. For practical usage, adjust the positioning of the container elements as needed within the document structure.