---
title: 'Video.js 7.3: Responsive Layout, Fill Mode, createLogger'
description: Video.js 7.3 introduces Responsive Mode using playerresize event to apply breakpoint classes like vjs-layout-small for adaptive UI, promotes Fill Mode to first-class feature for contained resizing, and adds createLogger method for hierarchical plugin debugging.
canonical: https://videojs.org/blog/video-js-7-3-responsive-layout-fill-mode-createLogger
tags:
  - responsive
  - log
  - fill
  - fluid
  - playerresize
authors: [gary-katsevman]
---


Another month, another Video.js release: [v7.3.0](https://github.com/videojs/video.js/releases/tag/v7.3.0). This release brings a long wanted feature: Responsive Layout.
In addition, Fill Mode has been promoted to a first-class feature and createLogger was added to make debugging and logging easier.

This is currently out as a pre-release and will be promoted to latest in about a week. Please try it out and [report any issues you find](https://github.com/videojs/video.js/issues/new).

## Thanks
I'd like to thank everyone that was involved in making changes that landed in this release. Any and all changes are really appreciated.

- [@BrandonOCasey](https://github.com/BrandonOCasey)
- [@chrisrng](https://github.com/chrisrng)
- [@syranez](https://github.com/syranez)
- [@misteroneill](https://github.com/misteroneill)
- [@OwenEdwards](https://github.com/OwenEdwards)

## Responsive Mode
[Responsive Mode](https://docs.videojs.com/tutorial-layout.html#responsive-mode) will make the player adjust UI components to the size of the player. It uses the [<code>playerresize</code>](https://github.com/videojs/video.js/pull/4864) event that was added in [v6.7.0](https://github.com/videojs/video.js/releases/tag/v6.7.0) of Video.js, which allows us to know when the player changes sizes.

Responsive mode will set and change certain breakpoint classes like `vjs-layout-small` when the player size changed. These can be [configured](https://docs.videojs.com/tutorial-layout.html#customizing-breakpoints). Depending on which class is currently on the player, the control bar and other UI elements can adapt. For example, with `vjs-layout-small`, the time controls will not show because the time tooltips on the progress bar are available and the captions button is more important. At a larger size, both can be shown without a problem.

You can find out how to enable [Responsive Mode](https://docs.videojs.com/tutorial-layout.html#responsive-mode) and more in our [docs page](https://docs.videojs.com/tutorial-layout.html#responsive-mode). There is also an example playground in the [sandbox folder in the repo](https://github.com/videojs/video.js/blob/main/sandbox/responsive.html.example).

## Fill Mode
[Fill Mode](https://docs.videojs.com/tutorial-layout.html#fill-mode) allows the Video.js player to resize dynamically, but stay contained within the bounds of the parent container. This is analogous to [Fluid Mode](https://docs.videojs.com/tutorial-layout.html#fluid-mode), but sometimes you the container is already being sized properly.

Fill Mode is not a brand new mode, the class `vjs-fill` has been available in Video.js for quite [a while](https://github.com/videojs/video.js/commit/2fc8968002cf2f40128c39699c3ffbaac73fc9ed#diff-6be43b1f61c2cbcb90c6cb4a762ad527R64). This finally makes it a first-class feature to go along with Fluid Mode.

## createLogger
This is a new method on `videojs.log` that allows you to create a new logger with a specific name. It then creates a chain of names to make it easier to track which component logged this particular message. In particular, this can help plugin authors to log messages and then filter out only the messages that are associated with their plugin.

`createLogger` returns a function with the same API as `videojs.log`. You can see it in action below.

### Examples
A new method, `player.log` was added which uses createLogger behind the scenes. It logs the player ID in addition to `VIDEOJS`:

```js
var player = videojs('myid');

player.log('foo');
// VIDEOJS: myid: foo
```

You can also go further and create a sub logger:

```js
var player = videojs('myid');
var mylog = player.log.createLogger('my-plugin');

mylog.log('foo');
// VIDEOJS: myid: my-plugin: foo
```

If you want to log a warning or error for your custom plugin:

```js
var player = videojs('myid');
var mylog = player.log.createLogger('my-plugin');

mylog.log.warn('foo');
// VIDEOJS: myid: my-plugin: WARN: foo

mylog.log.error('bar');
// VIDEOJS: vid1: my-plugin: ERROR: bar
```
