Embedding Teleport as a responsive player without clipping or black bars

To prevent black bars and have a responsive embedded Teleport player a script based embed is required.

iframes can't set their own height due to browser security settings, to get around this we need to use a script based embed code and the containeraspectratio=auto parameter. Simply change your embed codes from iframe to script as in the last two examples below.

Note the url change in the embed code to api/v2/player?feedid=..

Resize the browser window to see responsive sizing with this embedding method

Responsive size and aspect ratio Teleport player

Normal embed code, fixed size, not responsive, black bars if size isn't set correctly

<iframe width="640" height="280" src="//www.teleport.io/api/v2/player?feedid=mthayes" frameborder="0" allow="fullscreen" allowfullscreen></iframe>

Responsive width, but has black bars (using width: 100%)

<iframe width="100%" height="280" src="//www.teleport.io/api/v2/player?feedid=mthayes" frameborder="0" allow="fullscreen" allowfullscreen></iframe>

Responsive width, no black bars but has clipping (using framesizingmode=uniformtofill in url)

<iframe width="100%" height="280" src="//www.teleport.io/api/v2/player?feedid=mthayes&framesizemode=uniformtofill" frameborder="0" allow="fullscreen" allowfullscreen></iframe>

Responsive width & height, no black bars, height matches feed aspect ratio (using new script embed code and containeraspectratio=auto or containeraspectratio=16to9 to force a specific aspect ratio)

<div style="max-width: 750px">
<script src="//www.teleport.io/api/v2/player?feedid=mthayes&containeraspectratio=auto"></script>
</div>

The same thing but no max-width (or max-height) container, player spans entire width (removed outer div)

<script src="//www.teleport.io/api/v2/player?feedid=mthayes&containeraspectratio=auto"></script>

Embedding Teleport as a responsive player Removes black bars and auto sizes