Flexible and 100% Width Player Embeds – Backtracks

Backtracks players may be 100% width or any width of your choosing. This article describes various ways that the player width may be set.

How To Set Player Embed Widths

Automatic Width Inheritance From Container Element or Page

By default, players will fit the width of the container element or tag that they are placed with (e.g. div, p, etc.). For example, if a player is within a part of a page or view that has a particular width set that it will by default have a width that is 100% of that value (i.e. fill the width of the container taking into account any padding, etc.).

To show a specific example of inheritance when there are no other widths set from outside CSS or styling, these are equivalent (the former inheriting the width of the div with the id of "example-container"):

<div id="example-container">
 <div data-bt-embed...></div>
</div>

<div style="max-width: 100%">
 <div data-bt-embed...></div>
</div>

Absolute Width

Example of the player inheriting a 900px width (which could also be 80%, 60%, set with a CSS class, etc.). This may be set with any of the width settings for HTML and CSS such as width or max-width.

<div style="max-width: 900px">
 <div data-bt-embed...></div>
</div>

Relative Width

If the container element has a relative width set as a percentage, that will also be taken into account. In the example below the width of the container that the player embed is placed in has CSS styling that makes the max-width of the container 60% of the device's viewport (e.g. screen).

<style>
.div-width { 
 max-width: 60%;
 // width: 60%;
}
</style>

<div class="div-width">
 <div data-bt-embed...></div>
</div>

Setting Width on the Player Embed Directly

The width of the player may be set directly on embeds as well.

Responsive Maximum Width

The player will be responsive to screen resizes or changes in this example and the maximum width that the player can extend to is defined.

<div style="max-width: 900px" ...></div>

<div style="max-width: 85%" ...></div>

Absolute Fixed Width

The player will not be responsive to screen resizes or changes in this example. Setting the width absolutely will ensure that the player stays this width over resizes (which is desired in some scenarios).

<div width="900px" ...></div>

<div width="85%" ...></div>