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

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

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

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)

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