Vimeo shortcode support for vertical video aspect ratio

[Weaver]

I’ve been trying different approaches, and for different sources. Would like to add TikTok and maybe Instagram.

I think @User ‘s approach will be best.

So far in my testing, all horizontal videos work as one would hope. I want to add a a cinematic option and maybe square. (I could also add height and width otpions that would cover everything, but that might be getting too “technical” as aspect rations are expressed different ways.) But whatever the original source aspect ratio, all of them seem to be shown in the correct aspect ration, but with different padding bars.

So options for sd, hd, cinematic, square would actually fit almost any soruce – horizontally.

But when showing a vertical video, the main aesthetic  issue is having the vertical video be too wide on full size displays. The max-width soluton seems to solve this for any screen I’ve tested. Don’t think a height limit is necessary, and I don’t want any CSS classes involved.

So adding a vertical option will simply swap the “standard” aspect ratios (16:9 <-> 9:16, etc), plus add the max-width wrapper. I think square would need the max-width wrapper as well.

I’m away from my development environment for a few days, but should be able to have ths done next week.

[Weaver]

@Ned –

OK – I finally have the updated version of the theme support plugin ready to go. I had to figure out all the standard aspect ratios, and then find/create examples to test.

I’m confident this one works as it should, but wanted to give you a chance to try it first.

The new version is 2.6.10.

You can download it here using the small 6.2.10 link: Weaver Download Page

The changes:

• Fixed some issues with WP Multisite
• Added vertical=1 option to vimeo and youtube shortcodes for vertical
• Added aspect=sd/hd/widescreen/anamorphic/70mm/square as options

There is an example of the new version on the guide site: Video Shortcode Demos

I’d appreciate if you try it and let me know if it does what you need. I will then update the offical version on the WP Plugin repository. No big rush.

[Ned]

Thank you SO MUCH, @weaver, all I can say is WOW!

I updated to Weaver Xtreme Theme Support – 6.2.10 and built some test pages that tested out perfectly on desktop, tablet, phone with Chrome, Edge, Firefox and Samsung browser.

I’ve used your products since Weaver 2010. I’ve always been amazed by your responsiveness and that of the user support community here.

I know you must know how rare it is for a single user to make a feature request then have the developer implement it for him. Wow!

[Weaver]

The 9:16 thing has been nagging at the back of my mind for some time.

It does seem a difficult thing to control using the standard copy/paste stuff from vimeo/youtube and get it to look right.

And adding their embed codes requires either a Text View, or using an HTML block. Using the right block isn’t bad, but the default displays of Vimeo/Youtube videos by the built-in handlers from WordPress don’t really work well.

There are paid plugins that can do a nice job on different aspect ratios, but they are not really that cheap.

I don’t know if the old fitvid JavaScript code has been updated to handle different aspect ratios or not.

[Author]

Posts