Responsive Sizing for Video Players

ProductEdition
Video CloudProfessional, Enterprise

When you embed a video player in a page, you will notice that it does not resize with the browser window. This occurs because, by default, the video player is given a fixed width and height, preventing it from responding to changes in the browser. One aspect of responsive web design is ensuring that elements within your page adapt gracefully to different screen sizes.

This document focuses on resizing video players according to screen dimensions, while also maintaining the aspect ratio, so that the video is not letterboxed (see image below).

This topic will cover the following:

  • Create a responsive player using an intrinsic ratio
  • Control the size of your responsive player
  • Calculate the intrinsic ratio to avoid letterboxing
  • Create a responsive player in HTML mode

Note: The samples in this document do not address all the aspects of responsive web design, which might include font changes and whole layout transformations.

Getting started with the player code

You will start with the basic Player code embedded in an HTML document. The Player code can be copied from Video Cloud Studio. Here is an example of the Player code:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Player</title>
</head>
<body>
<!-- Start of Brightcove Player -->
<div style="display:none">
</div>

<!--
By use of this code snippet, I agree to the Brightcove Publisher T and C
found at https://accounts.brightcove.com/en/terms-and-conditions/.
-->

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

<object id="myExperience1754276206001" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="480" />
<param name="height" value="270" />
<param name="playerID" value="1753810340001" />
<param name="playerKey" value="AQ~~,AAABmA9XpXk~,-Kp7jNgisrdihurn3hYnYJWo8k_gM6uF" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />

<param name="@videoPlayer" value="1754276206001" />
</object>

<!--
This script tag will cause the Brightcove Players defined above it to be created as soon
as the line is read by the browser. If you wish to have the player instantiated only after
the rest of the HTML is processed and the page load is complete, remove the line.
-->
<script type="text/javascript">brightcove.createExperiences();</script>

<!-- End of Brightcove Player -->
</body>
</html>

To learn more about generating the Brightcove player code, refer to the Publishing a Video Cloud Player document.

Creating a responsive video player using an intrinsic ratio

In this solution, you will use an intrinsic ratio, which is a CSS technique to fluidly constrain a child element to a ratio set in their parent element. To do this, you will add a <div> container around the video player and set the padding-bottom property with the desired aspect ratio for the video.

The padding property is the magic that styles a box with an intrinsic ratio. This is because the padding property is set as a percentage of the width of the containing block. It works well since padding styles are supported in all major browsers.

Note: This solution is borrowed from a blog post by Thierry Koblentz. For more details about browser compatibility, refer to his blog post.

Creating a responsive video player consists of the following:

  1. Add a parent container around the video player and style it with an intrinsic ratio
  2. Verify the sample code

Creating a parent container with an intrinsic ratio

In your HTML document, add HTML and CSS code to do the following:

  • Add a <div> container around the video player.
  • Style the outer container with the padding-bottom property set to a percentage to control its size. The percentage determines the height of the element based on its parent's width.
  • Note: To determine the percentage for a video with a 16:9 aspect ratio, divide 9 by 16 (i.e. 9/16 = .5625) to get 56.25%. For a 16:9 video, you want the height to be 9/16ths of the width.

  • If your video player contains chrome controls, you will also need to specify a fixed-pixel padding-top value for the outer container. This value should equal the height of your player's chrome controls.
  • This example uses a Chromeless Video Player, so a padding-top value is not required.

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Player</title>
<style type="text/css">
.outer-container {
position: relative;
padding-bottom: 56.25%;
}
.BrightcoveExperience {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, ...</p>

<div id="container1" class="outer-container">

<!-- Start of Brightcove Player -->
...
<!-- End of Brightcove Player -->

</div>

<p>Lorem ipsum dolor sit amet, ...</p>
</body>
</html>

Note: A text block has been added above and below the video player to demonstrate how the player would appear in a real web page.

Running the sample code

Run the sample code in the browser. Resize the browser to see how the video player resizes.

Controlling the size of your responsive video player

Notice that in the previous solution, the video player width extended to the full width of the browser. You can control the width of your player by adding another bounding container.

Controlling the size of your player consists of the following:

  1. Add another bounding container around the video player
  2. Verify the sample code

Adding a bounding container

In your HTML document, add HTML and CSS code to do the following:

  • Add a <div> container around the outer-container <div> block.
  • Style the containing-block container with the width property set to a percentage to control its size.
 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Player2</title>

<style type="text/css">
.containing-block {
width: 75%;
}
.outer-container {
position: relative;
padding-bottom: 56.25%;
}
.BrightcoveExperience {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, ...</p>

<br />

<div class="containing-block">
<div class="outer-container">

<!-- Start of Brightcove Player -->

...
<!-- End of Brightcove Player -->

</div>
</div>

<p>Lorem ipsum dolor sit amet, ...</p>


</body>
</html>

Click here to view the complete sample page.

Running the sample code

Run the sample code in the browser. Resize the browser to see how the video player resizes. Notice that the video player is only 75% of the width of the browser.

Calculating the intrinsic ratio to avoid letterboxing

Using a non-standard video size can cause letterboxing. This video has an intrinsic ratio of 53%. Since it does not fit the standard 16:9 aspect ratio (56.25%), it causes letterboxing.

Note: You can find the video's width and height in the Brightcove Media module to compute the intrinsic ratio. (i.e. 212/400 = .53 or 53%)

By using the Smart Player API, you can get the dimensions of the video and set the video size.

Controlling the size of your player consists of the following:

  1. Enable your player for ActionScript/JavaScript APIs.
  2. Use the Smart Player API to get the width and height of the video and calculate the percentage for the padding-bottom property.
  3. Verify the sample code

This solution, requires the following:

  • Access to the Brightcove Player API

Enabling your player for ActionScript/JavaScript APIs

In Video Cloud Studio, make sure you have enabled the player for ActionScript/JavaScript APIs in the Web Settings section.

Note: Your custom code for the Player APIs will fail silently if this player setting is not enabled.

Calculating the aspect ratio percentage

In Video Cloud Studio, make sure you have enabled the player for ActionScript/JavaScript APIs in the Web Settings section.

In your HTML document, add JavaScript code to access the Player API to do the following:

  • Include the Player API event listeners.
  • Create an onTemplateLoad() function that defines the player and the APIModules object.
  • Create an onTemplateReady() function that defines the video player and the experience module. Get the width and height for the current video rendition and use these values to calculate the intrinsic ratio.

Note: To view the console messages in this solution, turn on the console using the browser's developer tools.

 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Player3</title>

<style type="text/css">
.containing-block {
width: 75%;
}
.outer-container {
position: relative;
padding-bottom: 56.25%;
}
.BrightcoveExperience {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, ...</p>

<br />

<div id="container2" class="containing-block">
<div id="container1" class="outer-container">

<!-- Start of Brightcove Player -->
...
<!-- smart player api params -->
<param name="includeAPI" value="true" />
<param name="templateLoadHandler" value="onTemplateLoad" />
<param name="templateReadyHandler" value="onTemplateReady" />
</object>

...
<!-- End of Brightcove Player -->

</div>
</div>

<p>Lorem ipsum dolor sit amet, ...</p>

<script type="text/javascript">
var player,
APIModules,
videoPlayer,
experienceModule;

function onTemplateLoad(experienceID){
console.log("EVENT: onTemplateLoad");
player = brightcove.api.getExperience(experienceID);
APIModules = brightcove.api.modules.APIModules;
}

function onTemplateReady(evt){
console.log("EVENT.onTemplateReady");
videoPlayer = player.getModule(APIModules.VIDEO_PLAYER);
experienceModule = player.getModule(APIModules.EXPERIENCE);
videoPlayer.play();

videoPlayer.getCurrentRendition( function (renditionDTO) {
var newPercentage = ( renditionDTO.frameHeight / renditionDTO.frameWidth ) * 100;
newPercentage = newPercentage + "%";
console.log("Video Width = "+renditionDTO.frameWidth+" and Height = "+renditionDTO.frameHeight);
console.log("New Percentage = "+newPercentage);
document.getElementById("container1").style.paddingBottom = newPercentage;
});
}

</script>

</body>
</html>

Click here to view the complete sample page.

Running the sample code

Run the sample code in the browser. Notice that the new percentage is calculated from the actual height and width of the video which eliminates letterboxing.

Creating a responsive player in HTML mode

Your video plays in an iframe when in HTML mode. In this section, you will learn how to resize a video contained in an iframe.

Using a parent container with the intrinsic ratio while in HTML mode, you will notice that the player container resizes but the actual video does not.

To resize your video in HTML mode, you must change the size of the iframe. You can do this by using the setSize() method.

Resizing your player in HTML mode consists of the following:

  1. Use the Smart Player API to get the computed width and height of the video and reset the size of the iframe.
  2. Verify the sample code

This solution, requires the following:

  • Access to the Brightcove Player API

Resetting the iframe size

In Video Cloud Studio, make sure you have enabled the player for ActionScript/JavaScript APIs in the Web Settings section.

In your HTML document, add JavaScript code to access the Player API to do the following:

  • Include the forceHTML player parameter to force HTML mode.
  • Note: The forceHTML parameter should only be used for testing.

  • Include the Player API event listeners.
  • Create an onTemplateLoad() function that defines the player and the APIModules object.
  • Create an onTemplateReady() function that defines the video player and the experience module.
  • Create an window.onresize() function that gets the computed width and height for the video player. These values are passed to the experience module's setSize() method to resize the iframe.
  • Programmatically dispatch a window.resize event. This causes the onresize method to be called on application startup. This must be done or on startup the iframe will not be the correct size. The last three lines of code of the onTemplateReady event handler use JavaScript to perform this task.
  • Note: Use the id value in the object tag for your player to get the computed width and height values.

Note: To view the console messages in this solution, turn on the console using the browser's developer tools.

 <script type="text/javascript">
var player,
APIModules,
videoPlayer,
experienceModule;

function onTemplateLoad(experienceID) {
console.log("EVENT: onTemplateLoad");
player = brightcove.api.getExperience(experienceID);
APIModules = brightcove.api.modules.APIModules;
}

function onTemplateReady(evt) {
console.log("EVENT.onTemplateReady");
videoPlayer = player.getModule(APIModules.VIDEO_PLAYER);
experienceModule = player.getModule(APIModules.EXPERIENCE);
videoPlayer.play();

videoPlayer.getCurrentRendition(function(renditionDTO) {
var newPercentage = (renditionDTO.frameHeight / renditionDTO.frameWidth) * 100;
newPercentage = newPercentage + "%";
console.log("Video Width = " + renditionDTO.frameWidth + " and Height = " + renditionDTO.frameHeight);
console.log("New Percentage = " + newPercentage);
document.getElementById("container1").style.paddingBottom = newPercentage;
var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize',true,false,0);
window.dispatchEvent(evt);
});
}

window.onresize = function(evt) {
console.log("in resize function");
var resizeWidth = document.getElementById("myExperience1754276221001").offsetWidth,
resizeHeight = document.getElementById("myExperience1754276221001").offsetHeight;
experienceModule.setSize(resizeWidth, resizeHeight);
}
</script>

Click here to view the complete sample page.

Running the sample code

Run the sample code in the browser. Resize the browser to see how the video player resizes.

Post new comment

The content of this field is kept private and will not be shown publicly.
0

Comments