---
title: Overview
position: 1
seo_title: Overview of the MediaPlayer Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  MediaPlayer component and its types, check out the extensive set of available
  options in its live demo.
---
## MediaPlayer Overview

The MediaPlayer is a great tool to increase audience engagement with a product or a page, as video content tends to capture and retain user interest. For a better user experience and device compatibility, video content should be rendered in standard desktop or mobile formats, such as 16:9 (or 9:16 for vertical orientation) aspect ratio.

Key features of the MediaPlayer include controls for playing and pausing video, adjusting volume, and switching to fullscreen mode.

### Live Demo

<LiveDemo data='{"links":[{"text":"jQuery","url":"https://docs.telerik.com/kendo-ui/controls/mediaplayer/overview"},{"text":"ASP.NET Core","url":"https://docs.telerik.com/aspnet-core/html-helpers/media/mediaplayer/overview"},{"text":"ASP.NET MVC","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/media/mediaplayer/overview"}],"demo":"components/mediaplayer/overview"}'></LiveDemo>

### Appearance

The MediaPlayer component provides built-in styling options that grant visually appealing and flexible rendering experience.

#### Anatomy

The anatomy of the MediaPlayer summarizes the elements of the component.

<BlueprintImage data='{"description":"","labels":[{"text":"Titlebar"},{"text":"MediaPlayer toolbar"},{"text":"Play/Pause button"},{"text":"Label"},{"text":"Slider"},{"text":"Slider handle"},{"text":"Volume button"},{"text":"Volume slider"},{"text":"Fullscreen button"}]}'>![A Telerik and Kendo UI MediaPlayer component with the play and pause buttons, volume button with a slider, and fullscreen button.](images/components-mediaplayer-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI MediaPlayer including the Play/Pause button, volume button with a slider, and fullscreen button.")</BlueprintImage>

#### Playlist

The MediaPlayer allows users to create their own playlists and display them right next to the video container.

<BlueprintImage data='{"description":"","labels":[]}'>![The Telerik and Kendo UI MediaPlayer component demonstrating the playlist feature.](images/components- mediaplayer-overview-playlist.png "The Telerik and Kendo UI MediaPlayer component including the playlist feature.")</BlueprintImage>

#### Pause Overlay

When paused, the Telerik and Kendo UI MediaPlayer displays additional elements like the Suggested Links section, as well as the Watch Later and Share options.

<BlueprintImage data='{"description":"","labels":[]}'>![The Telerik and Kendo UI MediaPlayer component demonstrating the pause overlay.](images/components- mediaplayer-overview-vertical-configurator.png "The Telerik and Kendo UI MediaPlayer component including the suggested videos section, Share and Watch Later buttons.")</BlueprintImage>

### Framework-Specific Documentation

<Wrap>
<ExternalResource data='{"title":"Kendo UI for jQuery MediaPlayer","description":"Find more information about the Kendo UI for jQuery MediaPlayer in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/mediaplayer/overview"}'>![Kendo UI logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core MediaPlayer","description":"Find more information about the Telerik UI for ASP.NET Core MediaPlayer component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/media/mediaplayer/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC MediaPlayer","description":"Find more information about the Telerik UI for ASP.NET MVC MediaPlayer component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/media/mediaplayer/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>