Troubleshooting a Stage TEN Interactive Player that's embedded on your website

Here are some tips for if you have embedded the Stage TEN Interactive Player on your website but it does not appear or size correctly

Try adding a Stage TEN wrapper

A Stage TEN wrapper can be useful if the Interactive Player you embedded is not appearing or not resizing to your vertical thumbnail on a mobile device.

Before and After Wrapper-2

To add a Stage TEN wrapper, take the embed code set up here. Then add this to the line above the embed code:

<div id="stage-ten-wrapper" style="width: 100%; position: relative">

Next, add this to the line below the embed code:

  <script>
    const updateSize = () => {
      const stageTenWrapper = document.getElementById('stage-ten-wrapper')
      const currentWidth = stageTenWrapper.clientWidth
      if (currentWidth > 1000) {
        // Desktop
        stageTenWrapper.style['height'] = 'min(calc(' + Math.round(currentWidth * 1.1).toString() + 'px - 600px), calc(100vh - 150px))'
      } else {
        // Mobile
        stageTenWrapper.style['height'] = 'min(' + Math.round(currentWidth * (16/9)).toString() + 'px, calc(100vh - 50px))'
      }
    }
    window.addEventListener('load', updateSize)
    window.addEventListener('resize', updateSize)
  </script>

Here's an example of what the embed code with the Stage TEN wrapper should look like:

<div id="stage-ten-wrapper" style="width: 100%; position: relative">
<iframe
    src="https://play.stageten.tv/embed/787ce505-4b71-45bd-9b85-91cce6e6d4ae?splashImageURL=https%3A%2F%2Fstageten.tv%2Fhubfs%2Fempowered%2FAssets%2F03_bamblu_horizontal.png&splashImageURLVert=https%3A%2F%2Fstageten.tv%2Fhubfs%2Fempowered%2FAssets%2F03_bamblu_vertical.png&accentColor=006177"
    title="Stage TEN Interactive Player"
    style="width: 100%; height: 100%; position: absolute; left: 0; top: 0"
    allow="fullscreen; autoplay"
    frameBorder="0"
  >
  </iframe>
  <script>
    const updateSize = () => {
      const stageTenWrapper = document.getElementById('stage-ten-wrapper')
      const currentWidth = stageTenWrapper.clientWidth
      if (currentWidth > 1000) {
        // Desktop
        stageTenWrapper.style['height'] = 'min(calc(' + Math.round(currentWidth * 1.1).toString() + 'px - 600px), calc(100vh - 150px))'
      } else {
        // Mobile
        stageTenWrapper.style['height'] = 'min(' + Math.round(currentWidth * (16/9)).toString() + 'px, calc(100vh - 50px))'
      }
    }
    window.addEventListener('load', updateSize)
    window.addEventListener('resize', updateSize)
  </script>