Skip Navigation

[Resolved] vertical video

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 1 reply, has 1 voice.

Last updated by terryP-3 2 weeks ago.

Assisted by: Minesh.

Author
Posts
#2819860
Screenshot 2025-08-12 111926.png

Tell us what you are trying to do? Insert vertical video URL from YouTube

Is there any documentation that you are following? YouTube block

Is there a similar example that we can see? Will there be a 9:16 ratio - you don't have it listed in your dropdown of ratios. Or, is there a way to add this ratio? Is there a code snippet to add to the loop I can use? Maybe a way to add my own ratio? I don't see info on this anywhere. If there is, please point me to it.

What is the link to your site?

#2819965

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

There is no option available for now but you may would like to try to achieve this using the by adding the following custom CSS.

You can add the CSS class name "toolset-youtube.is-916" to your youtube video block from the "Layouts Customization" tab available on right panel and add the following custom CSS code to your content template's custom CSS box.
- https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/#steps-for-adding-css-to-a-content-template

.toolset-youtube.is-916 {
  position: relative;
  width: 100%;
  /* 16/9 = 56.25%; 9/16 = 177.777...% */
  padding-top: 177.7778%;
}
.toolset-youtube.is-916 iframe,
.toolset-youtube.is-916 .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#2820303

Perfect! Thank you.