WordPress Video Embeds

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

Videojs HTML5 Player Easy Video Player

Ovo je neki player Block Editor Media Manager sa repo na wphackers/media-manager

date 05. Dec 2022 | modified 29. Dec 2023
filename: Wordpress » Blocks Singular » Video Embeds & Players