# Custom Youtube gallery thumbnails size CSS

**URL:** <https://community.elfsight.com/t/custom-youtube-gallery-thumbnails-size-css/15611>\
**Category:** Customization\
**Tags:** youtube-gallery\
**Created:** [May 16, 2023, 2:51pm UTC](https://community.elfsight.com/t/custom-youtube-gallery-thumbnails-size-css/15611 "2023-05-16T14:51:36Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Designinja](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/designinja/32/1277_2.png) [@Designinja](https://community.elfsight.com/u/Designinja)\
**Post date:** [May 16, 2023, 2:51pm UTC](https://community.elfsight.com/t/custom-youtube-gallery-thumbnails-size-css/15611/1 "2023-05-16T14:51:36Z")

</div>

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 🥰

 ![shot](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/7/729f12f4702f1637767b1c623e01cd50c1669b19.jpeg)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 16, 2023, 3:09pm UTC](https://community.elfsight.com/t/custom-youtube-gallery-thumbnails-size-css/15611/3 "2023-05-16T15:09:31Z")

</div>

Hi @Designinja 👋

We’ll be happy to help!

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

---

<div class="post-metadata">

**Author:** ![Designinja](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/designinja/32/1277_2.png) [@Designinja](https://community.elfsight.com/u/Designinja)\
**Post date:** [May 16, 2023, 3:21pm UTC](https://community.elfsight.com/t/custom-youtube-gallery-thumbnails-size-css/15611/4 "2023-05-16T15:21:33Z")

</div>

Yeah, sure

> **[Synthesit | Feedback](https://www.synthesit.io/feedback)**

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 16, 2023, 3:29pm UTC](https://community.elfsight.com/t/custom-youtube-gallery-thumbnails-size-css/15611/5 "2023-05-16T15:29:11Z")

</div>

Thank you!

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

Have a great day 🙂

---

<div class="post-metadata">

**Author:** ![Masha](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/masha/32/1771_2.png) [@Masha](https://community.elfsight.com/u/Masha)\
**Post date:** [May 17, 2023, 10:19am UTC](https://community.elfsight.com/t/custom-youtube-gallery-thumbnails-size-css/15611/7 "2023-05-17T10:19:15Z")

</div>

Hi @Designinja,

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

```auto
<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!

---

<div class="post-metadata">

**Author:** ![Designinja](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/designinja/32/1277_2.png) [@Designinja](https://community.elfsight.com/u/Designinja)\
**Post date:** [May 17, 2023, 11:35am UTC](https://community.elfsight.com/t/custom-youtube-gallery-thumbnails-size-css/15611/8 "2023-05-17T11:35:39Z")

</div>

Hi, @Masha!

Thanks for your code, but it not helped 😅  
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:

```auto
[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 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![Masha](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/masha/32/1771_2.png) [@Masha](https://community.elfsight.com/u/Masha)\
**Post date:** [May 17, 2023, 12:16pm UTC](https://community.elfsight.com/t/custom-youtube-gallery-thumbnails-size-css/15611/9 "2023-05-17T12:16:51Z")

</div>

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Designinja](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/designinja/32/1277_2.png) [@Designinja](https://community.elfsight.com/u/Designinja)\
**Post date:** [May 17, 2023, 12:55pm UTC](https://community.elfsight.com/t/custom-youtube-gallery-thumbnails-size-css/15611/10 "2023-05-17T12:55:58Z")

</div>

Yeah! It’s work perfectly!

Thanks @Masha, luv elfsight team 🥰

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/1/1fe513bc446d521930d11db2a458f74dfdd5a391.jpeg)