Youtube Shorts - Vertical Video

Ask the Community Customization
1

Is it possible to make the galleries with YouTube Shorts display vertically instead of having dead space on either side?

2 Likes
3

Hello there, @Seth_Chomout :wave:

Could you please share a link to the page where your widget is installed? I’ll be happy to check it for you :slightly_smiling_face:

1 Like
4

Hey Max,

The way I think of this customization is to be able to display YouTube short videos in a vertical video block on a website with the same, or similar dimensions as the actual short videos. Right now, I’m able to do that with the native YouTube video embed feature in Google Sites. See below:

image
image543×943 99.9 KB

The form on the right side is the Elfsight Form Widget, with the Google Sites native vertical video blocks inserted on the left. All the videos are pulled from a YouTube short videos playlist. I want to standardize the look and feel of the page a much as possible. I don’t think these other posts cover my particular use case.

  1. YouTube Gallery: Shorts are supported now
  2. YouTube Gallery: How to display only shorts in your widget?
  3. Youtube Shorts
  4. Support for YouTube shorts

Also, I’m not sure if @Seth_Chomout has the same requirements.

With thanks,
mw

1 Like
5

Hi @Master_Web :wave:

Please send me a link to the page where your widget is installed. I’ll gladly check if anything can be done :slightly_smiling_face:

1 Like
6

Thanks Max. DMd you the link.

1 Like
7

I guess this is the only solution for now - Vertical video display (like Shorts)

Please try it out and let me know if it worked :slightly_smiling_face:

1 Like
8

Super Max does it again :fire:

It works well for displaying one short video vertically, so that’s great.

However, as I was tinkering, I thought would it be possible to stack multiple videos vertically like my use case :thinking:?

I tried adjusting the column and rows settings in the widget, however it just presented them horizontally.

I then tried dragging the widget vertically, however, it just showed the one short video at the top rather than stack videos vertically.

So what do you think?

With thanks,
mw

1 Like
9

Hi @Master_Web :wave:

We’ve added this part flex-direction: column; to your CSS code and everything worked fine:

image
image330×465 26.4 KB

If you’d like to add some spacing between videos, you can add this line gap: 10px; right after flex-direction: column;

Check it out and let me know if you like the result :slightly_smiling_face:

2 Likes
10

So Max,

I checked this out, and I saw that in the Elfsight Dashboard it worked how you described. I was even able to line up 4 videos on top of each other. However, when I check it on the test page, it looked like it worked, but it just reverted to the original 1 video vertical.

Could you and the team check on this again for me? I want to just use one instance of the Widget that will display four shorts stacked on top of each other.

With thanks,
mw

1 Like
12

Oh, I deeply apologize about that!

We’ll double-check things, and I’ll get back to you with the revised solution :slightly_smiling_face:

2 Likes
13

Hi there, @Master_Web :wave:

The thing is that the widget is installed in the narrow container, that’s why the mobile layout is applied to the widget.

Only 1 video was displayed because you’ve set 1 row to display for mobile devices. We’ve set the number of rows to 3 and now everything is working fine:

image
image327×340 11.6 KB
image
image336×661 16.1 KB
image
image324×470 17.8 KB


Please check your website and let me know how it looks on your end now :slightly_smiling_face:

1 Like
14

Thanks Max.

Checked it, tinkered with it, and it works and displays well on desktop, tablet and mobile. I wouldn’t have guessed that the mobile view settings would override the desktop view settings. Thanks for the CSS code. I also used the gap code.

With thanks,
ms

1 Like
15

Awesome, you’re most welcome :wink:

1 Like