New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Adaptive Behavior

Telerik ASP.NET Media Player comes with built-in adaptive behavior. When accessed via a mobile device, the control changes to create a user experience tailored to the device screen size. In this mode, RadMediaPlayer is mobile-friendly and its playback, time bar, volume and playlist features are easier to select and interact.

Mobile vs Auto render modes
You can enable the mobile layout of the control by setting the RenderMode property of the Scheduler to Mobile.
To cover the rendering of both mobile and desktop devices, you could set the RenderMode property to "Auto" . This option will automatically decide how to render the control on a smartphone, tablet or PC.
For more accurate device detection, you could reference the Device Detection Framework, which ensures that the control is rendered with appropriate UI according to the device screen size.

Viewport adjustment
For fine-tuning of the viewport you could add the following meta tag in the head section of the page:

< meta name = "viewport" content = "width=device-width, initial-scale=1" />

For optimal experience on mobile devices, we suggest that you use Telerik controls together with the Page Layout Framework, which will add responsive capabilities to your layout.

See more mobile-optimized demos of Telerik controls in this responsive sample app.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits=" MediaPlayer.Examples.AdaptiveBehavior.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin no-bg">
        <qsf:QrCode ID="QrCode1" runat="server" NavigateUrl=""></qsf:QrCode>

Support & Learning Resources

Find Assistance