ThreeKit Player Height

dillon luera

I am trying to resize the height of the player on our website. Any CSS selectors I use such as div#player doesn't change the height as documentation and other community articles here has suggested.

I noticed when I inspect the HTML being rendered it seems to be rendering the player with a "mobile___" class on desktop "class="holder___3ugrT mobile___jM1jy " for example.

We embedded the player on our site by :

<div id="player"></div>

then playing the following script:


    authToken: '######',
    el: document.getElementById("player"),
    assetId: '#######',

    showConfigurator: true,

    showAR: true,
    showShare: true,


  .then(async api => {
    window.player = api;
    var data = window.configurator = await api.getConfigurator();



Example of divs rendered on our website via desktop:

<div id="player">
<div class="threekit" style="height: 100%;">
<div class="holder___3ugrT mobile___jM1jy " style="height: 100%;">
<div class="player___25Zg2 mobile___jM1jy ">
<div class="canvas___BrMgq">
<div class="layerContainer___8IxRY">
<canvas width="960" height="448" style="width: 480px; height: 224.398px;">

Is there something I can add to our configuration script for it to know the difference between mobile and desktop to add the correct class?


1 comment

  • Comment author
    William Thompson

    Hi dillon luera - have you tried applying the styles directly to your player like this?     

    #player {
    height: 50vh;



Please sign in to leave a comment.