WordPress Video Embeds

WordPress Video Embeds

responsive video, responsive youtube

Improved Video embed for Youtube, local, etc.

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

This is a player called Block Editor Media Manager from the repository wphackers/media-manager. However, it is a terrible plugin that loads the entire React framework on the frontend - it’s a nightmare - wp-polyfill-inert.min.js, regenerator-runtime.min.js, wp-polyfill.min.js, react.min.js, react-dom.min.js, hooks/index.min.js, i18n/index.min.js

mihdan/mihdan-lite-video-embed: A faster YouTube/RuTube video embed.

futtta/wp-youtube-lyte: Embed YouTube on WordPress for optimal performance

Better Youtube Embed Block

Advanced Responsive Video Embedder (Rumble, YouTube, Vimeo, HTML5 Video …)

Optimize Youtube Video

Responsive videos – Fitvids developed by Sibin Grašić

date 05. Dec 2022 | modified 10. Jun 2024
filename: Wordpress » Blocks Singular » Video Embeds & Players