Custom Youtube gallery thumbnails size CSS

Hi elfsight team!

Need your help to customize Youtube gallery vertical video list. Increase size of thumbnails by 25-50% and add maximum number of description lines to 4 in custom CSS

I believe that you will help me :smiling_face_with_three_hearts:

1 Like

Hi @Designinja :wave:

We’ll be happy to help!

Could you please send me a direct link to the webpage with the widget?

Yeah, sure

Thank you!

I’ve forwarded your request to our devs! Please do not worry, we’ll keep you updated here.

Have a great day :slightly_smiling_face:

Hi @Designinja,

You can try adding this code next to your installation code:

<style>
@media(min-width: 768px) {
  .yottie-widget-video-preview {
    width: 75%;
  }
  .yottie-widget-video-info {
    width: 25%;
  }
  .yottie-widget-video-info-caption {
    height: 73px
  }
}
</style>

Please note that this will not work if you add it to the Custom CSS section of your widget. Let me know if this is what you’re looking for!

Hi, @Masha!

Thanks for your code, but it not helped :sweat_smile:
It seems like CSS of widget get priority over CSS of site.

Before go to community help I tried to write custom code similar to what I was already given for another widget:

[class^='yottie-widget-video-preview'] {
  width: 480px;
  height: 270px;
}

But it seems like height set in some parent div, which I can’t find in code. This limits size of preview, I guess.

If we can’t resize thumbnails in custom CSS of widget, probably my problem has no solution :man_shrugging:

Apologies, @Designinja, I can see the issue with the code I gave you! Please try this one instead.

<style>
@media(min-width: 768px) {
  .yottie-widget-video-preview {
    width: 75% !important;
    max-width: unset !important;
  }
  .yottie-widget-video-preview-thumbnail {
    width: 100% !important;
    height: 100% !important;
  }
  .yottie-widget-video-info {
    width: 25% !important;
  }
  .yottie-widget-video-info-caption {
    height: 73px !important;
  }
}
</style>
1 Like

Yeah! It’s work perfectly!

Thanks @Masha, luv elfsight team :smiling_face_with_three_hearts:

1 Like