Sizing the Player

Product(s)
Video Cloud
Brightcove Player
Role(s)
Studio User
Player Developer
Task(s)
Create & Configure Players
Topic(s)
Styling

This topic shows you how to size your video and player using the iframe and embed_in_page implementations.

Sizing considerations

There are two important concepts to keep in mind when sizing the video and the player:

  • Aspect ratio – The media width and height properties, set in your curl statement when creating a player, define the intrinsic video dimensions, also known as the aspect ratio.

  • Player size – The player width and height properties, set in the CSS or HTML code, control the size of the player. As you change the size of the player, it will use the intrinsic video dimensions to keep the controls positioned correctly.

Set aspect ratio

The video aspect ratio is the relation between width and height. Classic TVs use a 4:3 aspect ratio, while widescreen uses a 16:9 aspect ratio.

When you create a player, you can specify the video width and height using Studio. Use the Players module, Player Information section.

sizing-studio-aspect-ratio

The video aspect ratio will remain the same and the player controls will be positioned correctly as the player responsively resizes.

Using an incorrect ratio

When you specify a media aspect ratio that is different than the dimensions of your video, you will get letter boxing around the video and the player controls will not be positioned over the video.

Here we set the media width and height to 640px and 480px respectively (4:3 aspect ratio), while using the Tiger video which has a 16:9 aspect ratio.

incorrect aspect ratio

Using the correct ratio

When the media dimensions match the aspect ratio of your video, then there is no letter boxing and the player controls stay positioned correctly as you resize the player.

Here we set the media width and height to 640px and 360px respectively (16:9 aspect ratio) which is the same as the Tiger video.

correct aspect ratio

Set player size

You can set the size of the player using Studio. Use the Players module, Player Information section.

sizing player in studio

You can also use CSS to size the player, as detailed in the following sections.

Use iframe

For the iframe implementation, the player size can be set by supplying the width and height attributes for the iframe element. There are several ways to do this:

  • Add attributes to the iframe element

  • Use CSS with the iframe element

  • Use CSS with an id attribute

Add attributes to the iframe element

Add and set the width and height attributes to the iframe element.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Size the Player</title>
</head>

<body>
  <iframe src='https://players.brightcove.net/1752604059001/0711ceb1-07cf-430c-bd6f-951937e2c488_default/index.html'
    allowfullscreen webkitallowfullscreen mozallowfullscreen
    width="640" height="360"></iframe>

</body>
</html>

Use CSS with the iframe element

In CSS, set the width and height attributes for the iframe element.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Size the Player</title>

  <!-- Page styles -->
  <style>
    iframe {
      width: 640px;
      height: 360px;
    }
  </style>
</head>

<body>
  <iframe src='https://players.brightcove.net/1752604059001/0711ceb1-07cf-430c-bd6f-951937e2c488_default/index.html'
    allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

</body>
</html>

Use CSS with an id attribute

In CSS, reference an id added to the iframe element. This approach is useful if you have more than one iframe element on the page.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Size the Player</title>

  <!-- Page styles -->
  <style>
    #myPlayer {
      width: 640px;
      height: 360px;
    }
  </style>
</head>

<body>
  <iframe id="myPlayer"
    src='https://players.brightcove.net/1752604059001/0711ceb1-07cf-430c-bd6f-951937e2c488_default/index.html'
    allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

</body>
</html>

Use embed_in_page

For the embed_in_page implementation, the player size can be set by supplying the width and height attributes for the video element. There are several ways to do this:

  • Add attributes to the video element
  • Use CSS with the class attribute
  • Use CSS with an id attribute

Add attributes to the video element

Add and set the width and height attributes to the video element.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Size the Player</title>
</head>

<body>

  <video-js
    data-account="1752604059001"
    data-player="860a1ffd-4be3-4df6-9d46-c0621534108b"
    data-embed="default"
    class="video-js" controls
    width="640" height="360"></video-js>

  <script src="https://players.brightcove.net/1752604059001/860a1ffd-4be3-4df6-9d46-c0621534108b_default/index.min.js"></script>

</body>
</html>

Use CSS with the class attribute

The video element has a class attribute which can be referenced from CSS to set the player size.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Size the Player</title>

  <!-- Page styles -->
  <style>
    .video-js {
      width: 640px;
      height: 360px;
    }
  </style>
</head>

<body>
  <video-js
    data-account="1752604059001"
    data-player="0711ceb1-07cf-430c-bd6f-951937e2c488"
    data-embed="default"
    class="video-js" controls></video-js>

  <script src="https://players.brightcove.net/1752604059001/0711ceb1-07cf-430c-bd6f-951937e2c488_default/index.min.js"></script>

</body>
</html>

Use CSS with an id attribute

In CSS, reference an id added to the video element. This approach is useful if you have more than one video element on the page.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Size the Player</title>

  <!-- Page styles -->
  <style>
    #video_1 {
      width: 640px;
      height: 360px;
    }
  </style>
</head>

<body>

  <video-js id="video_1"
    data-account="1752604059001"
    data-player="860a1ffd-4be3-4df6-9d46-c0621534108b"
    data-embed="default"
    class="video-js" controls></video-js>

  <script src="https://players.brightcove.net/1752604059001/860a1ffd-4be3-4df6-9d46-c0621534108b_default/index.min.js"></script>

</body>
</html>

Using percentages

When using the height and/or width attributes on Brightcove Player's iframe or video tags, those attributes are measured in pixels only. In fact, you do not enter any units at all for the height and width attributes (you can enter the px, but technically it is invalid HTML):

width="480"

You can use percentages, and this can be accomplished using CSS in two different ways:

  • Using a style attribute in the video tag.
    <video-js data-video-id="5622718636001"
      data-account="1507807800001"
      data-player="default"
      data-embed="default"
      data-application-id
      class="video-js"
      controls
      style="width: 100%;height: 100%"></video-js>
    <script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
  • Using a style tag.
    ...
    <style>
        .video-js {
          height: 100%;
          width: 100%;
        }
    </style>
    ...
    <video-js data-account="1752604059001"
      data-player="H1xW7NWcz"
      data-embed="default"
      data-application-id
      class="video-js"
      controls></video-js>
    <script src="https://players.brightcove.net/1752604059001/H1xW7NWcz_default/index.min.js"></script>

Fullscreen display

In newer browsers that support the fullscreen API, it's necessary to apply in-page CSS rules to ensure the player is scaled to 100% when switching to fullscreen. Otherwise, the player will appear at the original size within the fullscreen display.

Use the following CSS to ensure the player scales when in fullscreen mode:

/***************************
* Fullscreen display      *
***************************/
body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
}
.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}
.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}

Order of precedence

You have seen an number of ways to size the player. The following is a list in order precedence:

  • Runtime changes (use JavaScript to change player size)
  • Size set in the <video-js> tag
  • CSS (following normal rules of inheritance)
  • Player configuration settings

Size in the Player API

There are 4 player methods in the Player API that return sizes in pixels, but it is important to understand the difference between them.

  • .height() - returns the height set in the height attribute of the video tag (if that attribute is not set, height() will return 0)
  • .width() - returns the width set in the width attribute of the video tag (if that attribute is not set, width() will return 0)
  • .currentHeight() - returns the current height of the player, however it was set
  • .currentWidth() - returns the current width of the player, however it was set

In most cases, currentHeight() and currentWidth() are the methods you want to use.