This is a migrated thread and some comments may be shown as answers.

MediaPlayer as background

1 Answer 101 Views

MediaPlayer

This is a migrated thread and some comments may be shown as answers.

1 Answer, 1 is accepted

answered on 23 Dec 2016, 03:16 PM

Hello,

You can use something like the following:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style>

.main-wrapper {

border: 3px solid green;

position: relative;

}

.mp-wrapper {

position: absolute;

top: 0;

left: 0;

z-index: 100;

display: inline-block;

border: 3px solid red;

}

.my-content {

position: absolute;

top: 0;

left: 0;

z-index: 1000;

display: inline-block;

border: 3px solid blue;

width: 1200px;

height: 900px;

color: white;

text-align: center;

font-size: 20px;

}

.my-content a {

display: inline-block;

padding: 15px 20px;

background-color: #00bcd4;

border: 1px solid aqua;

margin: 20px 10px 10px 10px;

border-radius: 10px;

color: white;

font-size: 20px;

text-decoration: none;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server"></asp:ScriptManager>

<div class="main-wrapper">

<div class="mp-wrapper">

<telerik:RadMediaPlayer RenderMode="Lightweight" ID="RadMediaPlayer1" runat="server"

Height="1000px" Width="1200px" Source="">

<Playlist>

<telerik:MediaPlayerVideoFile Title="Icenium" Poster="icenium.png">

<Sources>

<telerik:MediaPlayerSource Path="https://www.youtube.com/watch?v=JFAcOnhcpGA" />

</Sources>

</telerik:MediaPlayerVideoFile>

</Playlist>

</telerik:RadMediaPlayer>

</div>

<div class="my-content">

<h4 style="font-size: 60px;">Everything you need to succeed in games and VR/AR</h4>

<p

>Welcome to one of the world’s largest creative communities -- and the number one game development platform. Unity gives you everything you need to realize your creative vision fast, and move ahead.</

p>

<a href="">Get Until Now</a><a href="">What is Unitiy?</a>

</div>

</form>

</body>

</html>

Note that the MediaPlayer and the content are absolutely positioned and using z-index the content is placed over the MediaPlayer. That way it is not possible to use the pause/play button that is inside the player, but I just set a lower height of the content compared to the player so it is possible to use the buttons on the bottom.

Of course, you can decide to configure the player in a different way. With that example I am just showing how to put content over the video.

Regards,
Bozhidar
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.