Skip to main content

On April 3rd, 2017 Vidyard will be switching to a new user interface. Click here to learn more.

Vidyard Knowledge Center

Make an inline player responsive

Dynamically resizing a player in realtime, also known as responsive design, requires some coding specific to the design of your website.  The Vidyard player does not dynamically resize automatically. 

As a general guideline, the player can be adapted to fit into a responsive container element that you might already have on your page. If your divs are responsive for example, you can place the player inside of one and add the following lines to your CSS to make the player resize with the div.

<style>
    .vidyard_player > span {
        width: 100% !important;
        height: 100% !important;
        margin: 0 auto !important;
    }
</style>

Note: This assumes you are using the javascript inline embed code.

If you do not already have responsive elements on your page, you can use the following code to embed the player in a responsive element as demonstrated in the example below:

<style type="text/css">
.innerContainer {
    position: relative; 
    display: block;
    width: 100% !important;
    height: 0;
    padding: 56.25% 0 0 0; /* This should reflect your video aspect ratio */
    
    ​​​​​​​/* Use the following 2 lines if you wish to make your player align centrally */
    ​​​​​​​
    max-width: 640px; /* This should be the width of your player */
    ​​​​​​​margin: auto;
}
.outerContainer {
    max-height: 360px; /* Set this to the height of your player */
}
.vidyard_player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 640px;   /* These should be the dimensions of your player */
    max-height: 360px;
}
.vidyard_player > span {
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto !important;
}
</style>
<div class="outerContainer">
    <div class="innerContainer">
        <!-- Vidyard inline Javascript embed here -->
    </div>
</div>

Again, you may need to make some modifications to this code to make it work on your site.

Lastly, the player will work with media queries. If you're not familiar with media queries, learn more about them here.

Using media queries, you can resize the player iframe as necessary. The iframe has the class vidyard_iframe which can be set to the appropriate width and proportionate height based on the screen width.

  • Was this article helpful?