Download

How to create a UI which resembles a Youtube-like website?

Hi folks,

I’m stuck atm, and maybe you can shed some light on my thoughts: I need to build a UI that “looks” like a typical “streaming” website, e.g. Youtube. Basically, I made a sketch of what I want to achieve:

How would you do that? I thought about creating a rasterized image, draw everything the way I need, and put it into a widget. I’m not sure if I could simply “cut out” the view in the middle. But how would you handle different screen sizes? And can you move the viewport so that it doesn’t take the whole available screen, but only a predefined portion?

FYI: The website doesn’t have to work. It should be able to show some stats, but you don’t necessarily need to interact with it. In fact, it’s more of a gimmick.

I’m working with Blueprints. I could use C++, too, but that’s somehow my daily job (writing code), so this is a nice way of working with a different technique.

The way i would do it would be to use a lot of canvas panels and anchor them to different corners (or to the center) to deal with different screen sizes.
Just cover everything other than the “video” with canvas panels with images inside. It should work.

Thanks Allshar,

Yepp, that would work - but if I do it that way, I would cover a “large” amount of my viewport. Although, thinking about that, I might compensate that by zooming out. However, if I resize my Window, I might get into trouble if the aspect ratio doesn’t fit, I guess?

The amount you cover depends on what textures/images you use. Sure, what covers just a little of a large screen will cover most of the small one, but this is something you can deal with.
You can scale depending on the resolution and aspect ratio of the screen - some tinkering and you should find a good system.
How about this:

Create an image of a movie frame (like you did in a sketch), and put it in the center. The game will be visible if the inside of the frame is invisible :). On the left and right of that image put big white rectangles and anchor them to the middle. You can scale them depending on a resolution or you can just make them bigger then a screen. They will stick out on smaller ones.

That sounds like a good idea. I will try experimenting further with the widget and the grids it offers, seems like a good solution to me.

Thanks again. :slight_smile: