Does MediaPlayer allow percent size?

3 posts, 0 answers
  1. Alex
    Alex avatar
    2 posts
    Member since:
    Apr 2014

    Posted 09 Jun 2015 Link to this post

    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!

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 12 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alex
    Alex avatar
    2 posts
    Member since:
    Apr 2014

    Posted 15 Jun 2015 Link to this post

    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

Back to Top