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

Here is a tip 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 wrapper div can be useful if the Interactive Player you embedded is not appearing or not resizing to your vertical thumbnail on a mobile device.

• 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>