Nested rich text style element - video can't be styled?

Design help General
1

Hi there,

For an online magazine I’m working on there is this format with all portrait images and portrait video’s lined up and scrollable horizontally (like an Instagram story only in one big container). This will be populated via the CMS in a single Rich Text Element. I have managed to get this to work with images only: https://fontanel-2019.webflow.io/7days/merijn-hos

(An example of the horizontal scroll)

00
002878×1506 784 KB

I managed to style the image size via the nested Rich Text element on a seperate styleguide page (where the Rich Text element is named: Rich Text Block - 7days):
https://fontanel-2019.webflow.io/styleguide

However, I can’t get to style the video the same way. I have tried multiple ways, but it seems to not overwrite the size, and therefore the video is huge:

17
172878×1464 116 KB

Does anybody have an idea how I can make the portrait video’s the exact same size as the portrait images?

This is the CMS template page link:
https://preview.webflow.com/preview/fontanel-2019?utm_source=fontanel-2019&preview=ffb5dc124d82e373fb0e4e592a7db6c4&pageId=5cb451029854b50a04b5089d&itemId=5cb451029854b5f649b50959

This is the styleguide page link with the rich text element:
https://preview.webflow.com/preview/fontanel-2019?utm_source=fontanel-2019&preview=ffb5dc124d82e373fb0e4e592a7db6c4&pageId=5cb451029854b51ad3b50899

Thanks in advance!

2

You can override the styling of the video embed by using this code as a base:

.CLASS_OF_YOUR_RT figure.w-richtext-figure-type-video {
    width: 300px;
    height: 450px
    padding-bottom: 0!important;
}
3

Great Vincent it works! Thank you so much!!

1 Like
4

Hello @vincent,

I am having the same issue.

Where would you place this code? And what is “Class of your RT” mean?

Also is there a way to only control mobile? I like the look of my desktop version but my mobile version looks like this:

image
image354×751 64.1 KB

Any guidance would be great thank you.

5

Could I ask exactly where you are pasting this code?