Hey!! Chen, Awesome! Glad to help remove that letterbox and setting video responsiveness.
On various browser testing:
Yeah, this is always going to take a little testing because they haven’t quite adopted universal standards. The only way to get closer for all is to use an HTML 5 video embed. That’s what those services I posted will give - the ability to customize before uploading. True flexibility really comes during the embed creation, and these services allow for CSS tweaks before encoding into a wrapper before processing. If you need full compatibility, give a service a try, you may find easier embed customization.
I’m not sure how much customization Vimeo offers, I don’t use their service. Actually, I use Cincopa. In my opinion, this is the best service on the market. They offer multiple embeds; video, audio, gallery and slideshow. They allow full CSS customization and a ridiculous amount of embed options, including JS. I’d use this for your case. It’s one price for all the options too, I love them
Place the VW & VH in the Vimeo Iframe before uploading to Webflow. Check to see if they allow CSS access before processing. And yes, it’s best to use this method on most of your Div’s. However, be cautious and use this on the outer Divs, not inner/nested Divs.
To be clear & help your responsivenes site wide:
Minimize blue CSS styles. The more blue styles you set, the more you break the DOM. Lots of CSS styles will cause rendering issues for browser compatibility. Limit excessive blue styles in the panel.
When adding Divs, Images, Content, try to add content without any sizing, etc. Add nested content as is - and get the elements on the canvas. Then add responsiveness to the parent Divs - VW, VH, %. If you get in the habit of adding this to inner elements, your browser rendering will be effected.
Hope this helps ya! Let me know if you need anything else. See ya