expand on full width with auto height

[mburger81]

I try to expand the player by 100% of his container width, the height should be automatic. But this does not work, it works only on the other way, I can expand the player only on editing his height.

So it is very difficult using the player with bootstrap and dynamically width, by expanding automatic height .

Is this a bug, is that not possible or what I have to do?

[gaetancollaud]

Have you try the scaleUp configuration ?

[mburger81]

yea sure

this.locomote.config({buffer: 0, scaleUp: true});

scale is working, but only on changing height attribute and not width

[gaetancollaud]

You can try to trigger the browser resize event (even if I doubt it will work). $(window).trigger('resize');

[mburger81]

And what should I do on trigger resite?

The problem is I had to set absolute value of height for expanding whole width.

but doing this if width changed, I hat this behaviour as you can see in screenshot! The black background is also the player, so the height of the player is still xxx pixel and the content resized as well. But I would not set the height but the width to 100% and the height should automatic resized to the VIDEO content, so the player is always filling his parent div without background!

[gaetancollaud]

Ok now I understand your point. You want the flash container to resize to the video stream ? I'm I right ? I think you can get the playerStatus or the streamStatus which contains the resolution. You can then manually adjust the size of the container.

[mburger81]

I don't think if this is the solution for me.

I try to explain it better, if I set NO height to nothing but set the widht of the player to 100% as you can see the flashplayer in screenshot is expanded to the whole container div, but the stream in it is smaller than it. The thing I want to do, is expanding the stream two the size of the player, and the height should be in relation to the width, so height should be auto.

scaled stream width == flashplayer width == 100% of parent div scaled stream height & flashplayer height should be auto (in relation to width)

the result is, the STREAM fills the whole parent div, and there is never a black background to see

[gaetancollaud]

Not sure if you can do this automatically. I don't have any more clue here. My bet would be to do it manually from the stream resolution.

[mburger81]

okay, let's talk about that.

I don't want scale my dive to my stream, but I would scale my stream to my div! So knowing my stream resolution does not help me or it does?

[gaetancollaud]

So you want to break the ratio of your stream ? With the scaleUp the stream scale to the container (but respect the ratio). So if you want a perfect fit you have to adapt the container.

[mburger81]

No, I don't want to break the ratio of my stream!

But the width of flashplayer and the stream width should resized to fit container in width! And the height is dynamically by ratio! I think this should be a very normal thing?

<div id="container" style="width: 200px; height: auto;">
    <div id="player" style="width: 100%"></div>
</div>

I think this is a very basic behaviour. Or not?

Container is 200px wide, the player should fill the entire container, so it should also be 200px wide; The stream in player should scaleUp to 200px, so there on the left and right there are no black borders. And the height of anything should only be auto! Very very baisc I think?

I know my English is not good, sorry

[gaetancollaud]

Not it isn't. The flash player app cannot resize its container. The flash container area is defined in html. And the flash app is "sandboxed" in this area.

As I said, the only solution here is for you to take the stream resolution and resize the container in javascript. You can catch the onStreamStarted event and apply the resize at this moment.

[mburger81]

Ok so I have done this

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
   <div class="epc-item" style="height: auto; width: 100%;">
        <div style="width:100%; min-height: 100px"
                [style.height.px]="height"
                (window:resize)="calcHeight()">
            <div id="player" style="width: 100%px; height: 100%;"></div>
        <div>
    </div>
</div>

and somewhere in my angular2 code I have do calculate the height for the container width calculate by ratio of stream.

this.height = rect.width / (this.locomote.streamStatus().resolution.width / this.locomote.streamStatus().resolution.height);

I'm not happy with that solution, on resizing the window the player flickers a lot, probably the event will be caled to often!

but there is no other way, now it looks good

thx to @gaetancollaud

[gaetancollaud]

I'm glad you find a way.