Does MediaPlayer allow percent size?

[Alex]

Hi! It seems to me, I found nothing about adaptive MediaPlayer size at forum. 

The problem is that, if I don't define Width and Height properties, MediaPlayer shrinks to it minimal height.

Well, if we define width via css style to any percent value, MediaPlayer corresponds to this width. But any attempts to set Height (using css, skin, javascript) fail.

.mplayer {
    width: 80%;
    margin: 0 auto;
    height: 100%;
}

I need proportional dimensions, ex. 3:4. I want to set the height to 0.75 of width with any possible way.

Did anybody try to change MediaPlayer size so? Is it possible finally? Thank you in advance!

[Konstantin Dikov]

Hi Alex,

The only possible way for setting the Width of the control to be a percentage value of its Height is with JavaScript. You will also need to handle the resize event of the window and recalculate the values.

As for setting the Height to 100%, please have in mind that the wrapping DIV element of the RadMediaPlayer will expand to the height of its wrapping container. If it does not have fixed height, it will use the first wrapping element with such. With that in mind, please ensure that there is such wrapping element with specified Height:

<div class="wrappingDiv">
    <telerik:RadMediaPlayer ID="RadMediaPlayer1" runat="server" CssClass="mdplayer"
        Height="100%" Width="80%" AutoPlay="false">
        <PlaylistSettings Position="VerticalInside"/>
        <Playlist>
            <telerik:MediaPlayerVideoFile Title="AppBuilder">
                <Sources>
                    <telerik:MediaPlayerSource Path="Video/appBuilder.mp4" />
                </Sources>
            </telerik:MediaPlayerVideoFile>
        </Playlist>
    </telerik:RadMediaPlayer>
</div>

And the CSS:

<style type="text/css">
    html, body, form, .wrappingDiv {
        height: 100%;
    }

    .mdplayer {
        margin: 0 auto;
    }
</style>

Hope this helps.


Regards,
Konstantin Dikov
Telerik

[Alex]

Thanks great, Konstantin!

That is what I'd like to hear! I used percentage mediaplayer size and set its height via javascript (this works):

var sw = $(window).width();
$('#<%= mediaPlayer.ClientID %>').height( sw * 0.5625 ); // HD proption