Yendif Player

Quick responsiveness is a critical aspect of a web layout. The elements of such responsive web pages adapt smoothly to varied screen sizes.

This is one unique feature that allows Yendif Player, the first player to facilitate responsive web designs, to top the list of video players. A video player’s size is mainly determined by the range of container element. Have a look at the following example:

.yendifplayer {
  width: 600px;
  height: 338px;
}

In the above mentioned example, the video player has fixed height and width. Since the concerned player is set to a specific size, it does not respond when the screen size changes. Yendif Player is a uniquely-designed video player that supports fixed as well as responsive web layouts.. After all, its distinctive design allows it to be adjusted to several screen sizes. To avail this feature, you have to activate the "Responsive" option.

<script>
  yendifplayer.config = {
    responsive : 1
  };
</script>

By default, Yendif Player uses all the width that is provided, and the height of the player is determined by the "ratio" configuration setting which defaults to 9/16. You can choose to adjust the "ratio" as in the player configuration:

<script>
  yendifplayer.config = {
    responsive : 1,
    ratio : "3/4"
  };
</script>

You can even use the container element's "data-ratio" attribute to adjust the concerned ratio within the HTML configuration.

<div class="yendifplayer" data-ratio="0.417">
  <video>...</video>
</div>

Once you've adjusted the browser size, the size of your video will change accordingly while maintaining the ratio between its width and height.