Introduction
In the player you will see there are four videos that continually play as background videos. Also, at the start of each video the title and description of each video are displayed overlaying the background video. This sample is functionally identical to this background video sample, except that here the video fills the entire window, regardless of how the browser window is sized or resized. to get a sense of this, you can resize the Codepen below by clicking and dragging from the lower-right corner:

Note that this solution depends on a CSS property that may not be supported on older browsers - to make it work on all browsers, you can use the workaround explained here.
Player example
See the Pen Full Window Background Video Playlist by Brightcove Learning Services (@rcrooks1969) on CodePen.
View the source code.
Using the CodePen
Development sequence
API/Plugin resources used
API Methods | API Events | API Properties |
---|---|---|
player.playlist.repeat() | loadstart | player.mediainfo |
on() |
Player/HTML configuration
This section details any special configuration needed during player creation. In addition, other HTML elements that must be added to the page, beyond the in-page embed player implementation code, are described.
Player configuration
Be sure when you create the player the following settings are implemented:


Other HTML
First, the in-page embed player code is nested in TWO HTML div
elements. Both of the div
s should be removed, and replaced by a div
with the class full-bg
.
You will also need to modify the attributes of the video-js
tag:
- Add the attribute
data-playlist-id="{your playlist id}"
- Add the attribute
id="myPlayerID"
- Remove the attribute
class="video-js"
- Add the attribute
style="object-fit: cover;"
<div class="full-bg">
<video-js id="myPlayerID"
data-playlist-id="4450721964001"
data-account="1752604059001"
data-player="opeki2sGq"
data-embed="default"
data-application-id
autoplay
muted
controls
style="object-fit: cover;"
</video>
</div>
Application flow
The basic logic behind this application is:
- Appropriately style the player and box that contains the overlaid text.
- Set the playlist to repeat indefinitely.
- On the load of every video from the playlist display the video title and short description.
Set the playlist to repeat
Find the code which is labeled:
// +++ Set the playlist to repeat +++
The repeat()
method from the Playlist API is used to keep the playlist playing indefinitely.
Display the title and description
Find the code which is labeled:
// ### Display the title and description ###
An event handler is used to wait for the loadstart
event. This is done as the mediainfo
object is not populated until that event is dispatched. Then the name
and description
are injected into the HTML.
Application styling
The CSS performs the following tasks:
- Makes the background color of the window black. (for the CodePen only - you don't need to include this)
- Hides the player controls for the background video player.
- Disables pointer events on the player.
- Styles the box that overlays the text. Depending on the size of your player and the amount of content display these styles may need to be adjusted.
- Styles the player to completely fill the container
- Styles the
h1
used in the overlay text. - Styles the
div
container for the player - Styles the
vjs-tech
component to make the video fully fill the player
Plugin code
Normally when converting the JavaScript into a Brightcove Player plugin nominal changes are needed. One required change is to replace the standard use of the ready()
method with the code that defines a plugin.
Here is the very commonly used start to JavaScript code that will work with the player:
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
...
});
You will change the first line to use the standard syntax to start a Brightcove Player plugin:
videojs.registerPlugin('pluginName', function(options) {
var myPlayer = this;
...
});
As mentioned earlier, you can see the plugin's JavaScript code in this document's corresponding GitHub repo: full-window-background.js.
Using the plugin with a player
Once you have the plugin's CSS and JavaScript files stored in an Internet accessible location, you can use the plugin with a player. In Studio's PLAYERS module you can choose a player, then in the PLUGINS section add the URLs to the CSS and JavaScript files, and also add the Name and Options, if options are needed.