WordPress Video Embeds
Video Responsivness
I’ve tested, and video embeds are responsive and do preserve aspect ratio on mobile. There is not much to work there. By WordPress default, embed videos are set to 16:9 aspect ratio.
One thing to note, though, is that we must add a Vimeo video using the proper URL like this: https://vimeo.com/776132329
For the same video, if you insert similar URL like https://player.vimeo.com/video/776132329, it will seem that everything is alright, but it’s not and you can check that there will be no “Resize for smaller devices” block setting - the one that is responsible for responsive styling.
Lazy loading videos
Currently in Wordpress, width and height are by default present when inserting both in images and video embed iframes, altought iframes are controlled by video sites.
Therefore native browser lazy loading should be enabled both for images and iframes. But actually, for some reason, it doesn’t work for IFRAMES.
Native lazy loading
The proper way of doing this is that websites should use a “loading” attribute on “img” and “iframe” elements to control and interact with the browser’s default lazy loading behavior.
Lots of plugins provide native and/or JavaScript functionality a3 Lazy Load, WP Rocket, Perfmatters), etc, but I think we don’t need any of it for images as that is working perfectly fine out of the box.
Video lazy loading with preview image
Amazing open-source plugin Lazy Load for Videos, Github: kevinweber/lazy-load-for-videos
Both Videos from YouTube and Vimeo are supported. It does slightly improve page speed, loads only on pages where it is used, and you get to style some elements.
Video Playing Style, Lightbox vs inline
WP Video Lightbox is quite close to what I need, but not ideal. Video PopUp