How do I resize all the players on a page or site?

Here are examples of how to set all the players on a page or site to the same width. You may want to do this directly on pages or in templates for your page(s) or site(s). There are two ways to accomplishing resizing all the players on a page and either will work depending on your preferences and particular site setup. Player resizing may be accomplished by modifying styling via CSS or JavaScript.

Just a note, that any JavaScript below may also be added to script mangers like Google Tag Manager as-is and is safe to include on pages without players.

How To Set Player Embed Widths for All Players of a Page or Site?

Absolute Width

Example of the players being set to a 620px width (which could also be 80%, 60%, set with a CSS class, etc.).

CSS

This may be set with any of the width settings for HTML and CSS such as width or max-width.

<style>
 /* Add this to your CSS styling for the web page(s) or site(s) */
 #backtracks-player, .backtracks-player, .bt-player { 
   max-width: 620px !important;
 }
 </style>

JavaScript

The player widths may also be set via JavaScript.

<script type="text/javascript" id="gtm-bt-player-resize">
(function() {
    var itemsToChange = document.querySelectorAll("[id='backtracks-player'], .backtracks-player, .bt-player");
    for (var i = 0; i < itemsToChange.length; i++) {
        itemsToChange[i].style.maxWidth = "620px";
    }
})();
<script>

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 70% of the device's viewport (e.g. screen).

CSS

<style>
 /* Add this to your CSS styling for the web page(s) or site(s) */
 #backtracks-player, .backtracks-player, .bt-player { 
   max-width: 70% !important;
 }
 </style>

JavaScript

<script type="text/javascript" id="gtm-bt-player-resize">
(function() {
    var itemsToChange = document.querySelectorAll("[id='backtracks-player'], .backtracks-player, .bt-player");
    for (var i = 0; i < itemsToChange.length; i++) {
        itemsToChange[i].style.maxWidth = "70%";
    }
})();
<script>