# \[Announce\] node-red-contrib-ui-media

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669>\
**Category:** Share Your Nodes\
**Created:** [6 February 2019 18:14 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669 "2019-02-06T18:14:35Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![steuck13](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@steuck13](https://discourse.nodered.org/u/steuck13)\
**Post date:** [7 February 2019 13:16 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/4 "2019-02-07T13:16:35Z")

</div>

Sure, no problem, I don't know that much but I'll try

```
width: 100%;
height: auto;

```

Here we define that the video element will fill the whole horizontal space available on the parent element and the height will adjust automatically. You´ll see this a lot when people try to make an element responsive to resizing.

```
max-height: 100%;

```

Since height is automatically set, I defined that the video height can be no bigger than 100% of the parent element size. If I'm not mistaken, this means that if the parent element have the same width as the video but a smaller height, the video will scale down by the height instead of overflowing and showing scroll bars.

```
position: relative;
top: 50%;
transform: translateY(-50%);

```

This is a tricky one. In some cases I found out that the scroll bar still appear, usually because a few pixels overflowed. When you transform an element the sizes are adjusted because of the movement, so I used this trick to eliminate the scroll bar on these rare cases.

Cheers

---

_[View the full topic](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669)._