How To Embed A Responsive Player

It's no secret, over the past 10 years we've connected almost everything to the internet. Refrigerators, cars, thermostats, wearables, tablets, mobile phones, and of course laptops & computers, all of which have screens of some form or another. Most of these connected devices also play video, and they all support different size screens and different content formats. As our multi-screen world has evolved, so has the need to provide a content experience that adapts or responds to its screen size and format. To accommodate this need to build one experience across a multitude of devices, responsive web design has emerged. Responsive design is the art of creating applications and web sites that respond and adapt to different screen sizes and resolutions to provide an optimal viewing experience across all devices.

Because of this need to create dynamic and adaptive experiences across devices, we also developed Vid.ly, which provides transcoding, device detection and video delivery, in an automated and seamless fashion. Vid.ly is, in it's own right, a different kind of responsive. In essence, Vid.ly provides responsive playback, by detecting the device it will be serving video to, and selecting the optimal resolution, bandwidth, and format for the device, its screen size, and its connection to the internet. This makes Vid.ly perfect for integrating with a responsive design. With our last release, we integrated responsive players from JWplayer and FlowPlayer. Let's take a closer look at these innovative features.

All of the features and controls are available through the Encoding.com User Interface or the API. In the UI go to the Vid.ly tab on the left. This will bring you to all the Vid.lys you've created. Select a Vid.ly and you'll be presented with all of the settings for that Vid.ly. The Embed Code' menu item is what to look for.

For the embed code, simply select Responsive' and you're responsive code will be generated. The fixed resolution code makes use of an iframe, while the responsive code makes use of a div tag. When using the responsive embed code, you enable full support for the JavaScript API.

For comparison, let's take a look at the fixed resolution and responsive embed codes.

Below is the fixed resolution code. Notice the parameters to specify the player resolution, auto-play, and a poster image.



And here is the responsive embed code. Notice there are no parameters for player dimensions as this is handled automatically through the player's responsive design.



For customers that are automating their workflow via our API, we now include the responsive embed code with every response. Just look for the ResponsiveEmbed field in the AddMedia/AddMediaLite action response.

When it's all said and done, your embedded responsive vid.ly will look something like this (resize the screen and watch the player respond!):

LINK:	http://features.encoding.com/blog/2014/02/04/embed-responsive-player/...
	See more stories from encoding

Most recent headlines