YouTube videos customization

[Bert_Schodts]

How can you show the Shorts in 9:16 format, instead of the default 16:9 container with pillarboxing at the sides?

When I apply the custom CSS code on this page it seems to work on desktop (but with lot of white spacing…). But on mobile it’s looking very strange. Any suggestion/solution? Ideally 4 vertical videos next to each other on desktop, 3 on tablet and 2 on mobile.

Attached how my gallery is looking after embedding the custom CSS in my widget settings (on desktop and mobile). And the desired mobile layout (like on YouTube).

Thanks in advance for your help!

Grtz,

Bert

[Max]

Hi there, @Bert_Schodts and welcome aboard

You’d like to display videos in 4 columns on desktop, 3 - on tablet, 2 on mobile. And what about the number of rows?

From your screenshot, it seems that you’d like to have 2 rows on mobile, right? And how many rows would you like to have on desktop and tablet?

[Bert_Schodts]

Hello Max. Thanks for the quick reply. The number of rows can be two for all. But that’s easily changeable to 1 row I guess if desired? Not yet decided we go for more carousel layout (single row) or more grid layout (multiple rows).

[Max]

Got it!

We’ve adjusted the number of columns/ rows in the Columns and Rows section on the Layout tab and added this code to the Custom CSS field on the Appearance tab of your widget’s settings:

.yottie-widget-video,
.yottie-widget-video iframe,
.yottie-widget-video-preview-thumbnail img,
.yottie-widget-video-preview-thumbnail {

height: 560px !important;
}

.yottie-widget-video-preview-thumbnail img {
object-fit: cover;
}

Please check your widget and let me know if you like the result

[Bert_Schodts]

Hi Max, thanks for this. it would be great to also be able to define a different player height by breakpoint (like amount of rows, columns and spacing), so the 9:16 content is nicely displayed within a 9x16 container.

Other thing: I tried to use the embed code on a campaign landing page but it’s not showing the gallery. Only white/empty space… Can we connect via email? So I can send you the preview link.

B

[Max]

Sure! You can send it to me in private messages. Just click on my profile image and choose Message