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