Teleport을 반응형 플레이어로 임베딩

검은색 막대와 자동 크기 조정 기능을 제거합니다.

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="//devwebs.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="//devwebs.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="//devwebs.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="//devwebs.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="//devwebs.teleport.io/api/v2/player?feedid=mthayes&containeraspectratio=auto"></script>