Responsive RadMediaPlayer Height

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?

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: