Media Player: why resizing?

[MorningLight]

Hi!

I have a Flex-Container with a MEDIA PLAYER on top and a Layoutgrid on bottom. This Flex is set as shown:

Direction: row
Flex Wrap: wrap
Justify Content: center
Align Items: stretch
Align Contents: stretch

NOTE: even taking out the "STRETCH" and changing to "CENTER" I have the same behavior.

So, I have a MEDIA with its original size of 1280x720 in the MEDIA-PLAYER, set as:


http://www.oasys.com.br/temp/fig0.png


Interesting notice that the control size is set as 1280x720 in the 1600 pixels form (DEFAULT view).

The problem is: when the page size is above 1600 horz. pixels, everything goes OK, as shown:


https://www.oasys.com.br/temp/fig1.png

... but when the page width is less than 1600, I see the MEDIA-PLAYER resize the video for a little more than 800x400 without any reason!

To avoid this situation, I create a 1024 viewport and manually set the MEDIA control size to 1024x576 (the proportional size to the lower resolution) and again, between 1025 and 1600 pixels the image is resized, as you can see below.


https://www.oasys.com.br/temp/fig2.png


https://www.oasys.com.br/temp/fig3.png

I would expect the MEDIA control to be 1280 width until the viewport is less or equal 1024 pixels, but it does not happen!

So, I would like that the MEDIA-PLAYER would be static in its size (1280x720) all the time, independently of the viewport size.

I appreciate any help on this.

[crispy68]

Interesting notice that the control size is set as 1280x720 in the 1600 pixels form (DEFAULT view).

I do not see this in any of your photos. I assume you manually set the size of the media player in the default view to 1280x720?

Do you have flex-grow and flex-shrink set to 0 on the media player?

So, I would like that the MEDIA-PLAYER would be static in its size (1280x720) all the time, independently of the viewport size.

Wouldn't you rather have the video scale according to the browser size so it always looks good on the screen?

Do you have a demo project to share so we can see your setup and try to understand exactly what you are trying to do as I'm not able to exactly duplicate your issue. I set the default to 1600 and added a breakpoint at 1024. When I add a video, the size stays 1280x720 until I go below the 1600px. The video changes to the size that I specified in the 1024 bp.

[MorningLight]

I don't know why this system is not showing all images.
The links are all right.

I'll put the links below each image...

In response to your questions:

1- No, the default viewport is 1600 pixels and everything is ok from this to larger viewports.
2- Media player does not offer this setting.
3- No, I don't know the media player resizing according to the browser size (viewport) because in some iPHONE's people have claimed they are too small.

Your last line is exactly what I see as an error. I added a view of 1024 pixels, so, the video would be resized only when the browser size (viewport) is equal or less than this setting, isn't it?

Thanks for your help

[crispy68]

#2 - right click on the media player and select Flexbox from the context menu. Here you can set the flex-grow/flex-shrink properties.

I added a view of 1024 pixels, so, the video would be resized only when the browser size (viewport) is equal or less than this setting, isn't it?

Depends on what you have your manage breakpoints set as. I always suggest using "activate breakpoints when browser window is larger than the device width".

3- No, I don't know the media player resizing according to the browser size (viewport) because in some iPHONE's people have claimed they are too small.

The only issue with this is then your video may cause horizontal scrollbars if it's bigger than the viewport.

[MorningLight]

Thank you VERY much @crispy68 !!

The settings on the FLEXBOX seems to solve my problem.

And I'll try to set the BREAKPOINTS as recommended.

Again, thank you so much.