Introduction

How to Customize the UI of the Embed Player

Introduction

Embed player is an iFrame that has the endpoint to content to play that content. It can easily be embedded into any third-party website. User authentication is not required to play content in the Embed Player. There is an option to use the embedded player in specific domains in the player settings of Muvi One, Muvi Flex, Muvi Playout, and Muvi Live, and if that is enabled and domains are added then it will work in those domains only. Embed player supports all the player features except the nested content (for both audio and video).

Embed player is served from the Player Yii2 service but internally it calls the Polyglot API which is in the player Lumen service. You can customize the UI (User Interface) of the embedded player using the external CSS file.

How to Customize the UI of the Embed Player

You can customize the UI of the embedded player using the external CSS file. Developers can pass their external CSS to the embedded player. Using external CSS, The developers can customize the UI layout and design.

Example:-

<iframe style="background-color:#000;width:100%; height:100%;" src = "https://embedmuvi-server-dev.allthingsott.com/embed/e767703891544013a82f1518e917d490" frameborder = "0" allowfullscreen allow="encrypted-media"> </iframe>

<iframe style="background-color:#000;width:100%; height:100%;" src = "https://embedmuvi-server-dev.allthingsott.com/embed/e767703891544013a82f1518e917d490?custom_css=https://4f2d-49-37-117-174.ngrok-free.app/test/style.css" frameborder = "0" allowfullscreen allow="encrypted-media"> </iframe>

Customize Iframe using your CSS:-

You can add the Muvi Iframe in a particular Div on your HTML page. You can set the below CSS to your div for a responsive iframe player.

<style>

/*16:9 aspect ratio will result in 9 / 16 * 100% = 56.25% ; 4:3 aspect ratio will result in 3 / 4 * 100% = 75% ; 1:1 aspect ratio will result in 1 / 1 * 100% = 100% .*/

    .videoWrapper {

        position: relative;

        padding-bottom: 56.25%; /* 16:9 */

        height: 0;       

        width:100%;

    }

    .videoWrapper iframe {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

    }

</style>

<div class="videoWrapper"> 

<iframe style="background-color:#000;width:100%; height:100%;" src = "https://embedmuvi-server-dev.allthingsott.com/embed/cad8c755460a4d63a49dd2be6317cd57" frameborder = “0" allowfullscreen allow="encrypted-media"> </iframe>

</div>