Responsive Design

What is "Responsive Design"?

"Responsive Design" is a new method of creating web pages that support multiple screen sizes and automatically optimizes content to fit the user's viewing environment without requiring the site owner to create a separate mobile version. All the content on the website (text, images, and videos) is structured to dynamically adapt to smaller screens (smartphones, tablets) or larger screens (desktop, widescreen TVs) without losing the integrity of the overall design and layout or sacrificing user experience.

Why is it Important?

Audiences are using multiple devices to access content and stream video online. It's no longer just a matter of supporting desktop and mobile environments because screen sizes are not universal.

Your content needs to adapt to every screen size to give your audience the best experience possible. Whether your video gets played on a mobile device or sent to a HD television screen, it should look great. A responsive video player achieves this by detecting the screen size and adjusting its size for that experience.

How Adaptive Media Video Player Adjusts to Responsive Design

The ability to turn on responsiveness in the Adaptive Media video player is simply done by enabling a setting/property of the player. Our video player has the ability to resize itself according to the viewer's screen size and deliver a consistent playback experience on every device. Player responsiveness works with our Flash and HTML5 player.

In addition with our "playbackPriority" property, you can choose which player to load first and which to fall back on if the first choice is not supported. The playbackPriority property takes a comma delimited list for its value. For example, "html5,flash".

Turning on player responsiveness, requires the "playerFill" property to be set for the player application. What the playerFill property will do is ignore the width and height properties of the player and fill the target div to a 16:9 ratio (see below for examples). The playerFill property takes three values:

Value Description Select Example
both

auto fill both width and height *

width auto fill width
height auto fill height
* Note: Height must be specified in the target div or the following error message will be thrown in the player application: "Browser not supported".
Please select from one of the example buttons shown in the table above.