html – Cropping vimeo embed video to adjust to browser ratio

Question

I am a new wordpress user and I am wondering if the below function is possible or not. Thanks in advance.
Lets say if I have an Elementor section with its height set to “screen height” (meaning the section is now in full screen). I also have a vimeo video with a 16:9 ratio, is there a way to embed the video using the Elementor HTML component so that the video would crop its two sides to fill whatever ratio the browser is? Currently if the browser is narrower than 16:9, the video would get pushed up and the section background would be shown.

enter image description here

Here are my current code

<div style="padding:56.25% 0 0 0;position:relative;">
    <iframe src="https://player.vimeo.com/video/121131664?h=e12c501d84&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&autoplay=1&loop=1&background=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Random video"></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

Thank you very much!

0
Buttered_Toast 1 month 2021-10-31T10:47:51-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse