I want to display YouTube videos in vertical (9:16) aspect ratio. I'm using the Toolset YouTube block – the Aspect Ratio selector only shows horizontal aspect ratios.
Hi,
Welcome to Toolset support. The block's built-in Aspect Ratio setting (under Video Settings in the right sidebar) only offers landscape ratios, and there's no documented vertical 9:16 preset for it. To get a vertical embed you override the ratio with CSS.
Under the hood, the Toolset YouTube block sets its aspect ratio as a padding-top percentage on the inner wrapper (.tb-youtube > div), with the iframe absolutely positioned to fill it — for 16:9 the block outputs padding-top: calc(100%/16*9). To make it vertical, override that same rule with the 9:16 value and constrain the width so the tall embed stays a sensible size:
/* 9:16 vertical Toolset YouTube block */
.tb-youtube > div {
padding-top: calc(100% / 9 * 16); /* 9:16 = 177.78% */
}
.tb-youtube {
max-width: 360px;
margin: 0 auto;
}
If you have more than one YouTube block on the page and only want this one vertical, add a CSS class to that specific block (in the block's Advanced → CSS class field), then scope the rule to it, for example:
.vertical-video > div {
padding-top: calc(100% / 9 * 16);
}
.vertical-video.tb-youtube {
max-width: 360px;
margin: 0 auto;
}
Add the CSS to the block's custom CSS field or your theme's stylesheet.
Please consider that the code above will not work if the actual ratio of the video is not compatible with vertical videos.
Finally, as the option is not available in the core blocks plugin options, this is a suggestion code as is and if it does not work we can not not guarantee a working solution.
Thanks.
Thank you for your reply. The CSS you suggested only narrows the width of the video; it doesn't affect the aspect ratio of the display. I'd like to explore two other possibilities:
(1) is there any way to add to the selections available in the Aspect Ratio selector in theme.json or ??
(2) there are 3rd-party plugins that "do the right thing" via a shortcode that uses the YouTube URL as an attribute – is there a way to pass the URL in a Toolset custom field into a shortcode as a Dynamic Source?
Hello,
(1) theme.json — no. The settings.dimensions.aspectRatios presets in theme.json only feed blocks that use WordPress core's own aspect-ratio block support, which is limited to the Image, Post Featured Image, and Cover blocks. The Toolset YouTube block has its own Aspect Ratio control with a fixed landscape list, so presets you register in theme.json won't appear in that dropdown.
(2) Custom field into a third-party shortcode — yes, this is the workable route. Toolset can insert a field value inside another shortcode's attribute (WordPress core dropped shortcode-in-attribute support; Toolset re-enables it in its own rendering). Steps:
- Store the YouTube URL in a Types custom field on the post.
- Register the third-party video shortcode at Toolset → Settings → Front-end Content → Third-party shortcode arguments.
- Insert the combined shortcode inside a Toolset context — a Fields and Text block or a Content Template — nesting the field shortcode as the URL attribute:
[your_video_shortcode url='[types field="youtube-url"][/types]']
Note two constraints: Nesting works one level deep, and it must be rendered by Toolset (a Fields and Text block or Content Template) — not a plain core Shortcode block or a page-builder shortcode widget, or the inner [types] won't parse.
For more information:
https://toolset.com/documentation/legacy-features/views-plugin/shortcodes-within-shortcodes/
We can not recommend any third-party plugin that has the proper aspect ratios, but the code above will help you to integrate the shortcode of that plugin with Toolset.
Thanks.
