Edit Video Popup Module min height

Developer Support CMS Development
1

How can I edit the code of this module to make the minimum height less? At the moment it’s set at 300 but that doesn’t work well when placed in a three column layout (does not resize - just cuts off the sides of the video thumbnail and stays at 300 high)

Example here - top three thumbnails are plain ‘Video’ module placeholders and the second purple on the left is the ‘Video Popup’ that i need to use in the layout

video examples.JPG
video examples.JPG1303×729 84 KB

2

Hey, @RWoodcock8 :waving_hand: Thanks for your question. With code issues, it’s challenging or impossible for the community to troubleshoot from a screenshot alone.

Can you share the code for your module? This can help the community to give you a targeted reply.

Best,

Jaycee

3

Thanks Jaycee. I’m unable to view the code for this module - my inspect panel won’t bring it up. I’m not a dev also so very limited as to how to access the right info :wink: is there something I can try?

4

Hi,

From the way you describe it, it sounds like the module is using a fixed min-height of 300px in its CSS. That is why the height is staying locked even when you place it inside a smaller column layout. To adjust this you would need to edit the CSS rule that controls the container for the video thumbnail.

You can look in the module’s stylesheet (or use your browser’s inspector tool) to find something like:

.module-class {
 min-height: 300px;
}

Changing that value to something smaller, or better yet, using a relative unit like min-height: 200px; or even switching to height: auto; will allow the thumbnail to resize more naturally within your three-column grid.

If you want it to scale proportionally, you might also experiment with setting a responsive aspect ratio using padding-top percentages instead of a fixed pixel height. For example, if the videos are meant to stay at a 16:9 ratio, you could apply something like:

.video-wrapper {
 position: relative;
 padding-top: 56.25%; /* 16:9 aspect ratio */
 height: 0;
}
.video-wrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

That way the video always resizes smoothly no matter how many columns you place it in.