Try Now
More in this section

Forums / Designing & Styling / Responsive RadMediaPlayer Height

Responsive RadMediaPlayer Height

2 posts, 0 answered
  1. Cody
    Cody avatar
    4 posts
    17 Mar 2014
    03 Sep 2014
    Link to this post

    I'm trying to get the default Video content widget in Sitefinity (7.1) to be responsive based on the page width. The setup is simple, I just added the youtube video URL in the advanced settings for the control. 

    Things I Have Tried

    • Add Botstrap's Responsive Embed markup around the widget code.
    • Add FitVids.js to the page and mark .RadMediaPlayer as the target.
    • Remove the default width + height settings in the control source.

    I've also tried a number of the above combined. The only one that mildly works is removing the default height and width on the control through Sitefinity Thunder. By doing so the player's width becomes responsive, as it should based on the docs, but it's height is a consistent 153px at all screen sizes. What do I need to set, or edit, to get the player to fit the container width and adjust it's height accordingly?


  2. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    26 Mar 2015
    08 Sep 2014
    Link to this post
    Hi Cody,

    The behavior you are observing is such by default. It has to do with the fact that our HTML 5 player is based on Telerik's RadMediaPlayer, which is a control that does is not responsive. The reason for that is that the control relies on a height and width properties to be set and applies them when it first renders on a page. These properties are inline styles of this control's markup and without them it will not display itself.

    There is however a way for you to override this rendered markup with our Responsive Design module. What you need to do is specify a css file to be included in your responsive rules. In this file add a media query that is to activate at a certain screen size and there override the styles of the RadMediaPlayer class with an important tag so as they override the default ones. Below you can find the styles I am using:
    @media (max-width: 980px) {
    height: 100% !important; width: 100% !important;

    Ivan D. Dimitrov
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
2 posts, 0 answered