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:

<script>
 window.threekitPlayer({

    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();

  });

</script>

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></div>
<div class="layerContainer___8IxRY">
</div>
<canvas width="960" height="448" style="width: 480px; height: 224.398px;">
</canvas>
</div>

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?

Comments

1 comment

  • Comment author
    William Thompson

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

    #player {
    height: 50vh;
    }


     

    0

Please sign in to leave a comment.