Javascript API not working with iframe embeds

Hi,

I am running into an issue with the Javascript API when using the iframe embed. On my localhost player.play(); works, but the exact same code does not work on my live server (regardless of browser). The same code does however work with the <stream> embed. The stream embed, however, makes the iframes non-responsive in height, for some reason.

My code:

<div id="player-wrapper" class="dimm" style="height:100%;width:100%;">
        <iframe id="stream-player" src="https://iframe.videodelivery.net/xxxxxxxxx?loop=true&autoplay=false&controls=false" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;"  allow="accelerometer; gyroscope; encrypted-media;" allowfullscreen="true"></iframe>
        <script src="https://embed.videodelivery.net/embed/sdk.latest.js"></script>
        <div id="playpause"></div>
</div>
</main>
<script type="text/javascript">
        const player = Stream(document.getElementById('stream-player'));

        var playerWrapper = document.getElementById('player-wrapper');
        var playpause = document.getElementById('playpause');
        var playing = false;
        
        $('#player-wrapper').on("click touchstart", function(){
            if (playing == false){
                player.play()
                playing = true;
            } else {
                player.pause()
                playing = false;
            }

            if (playpause.hidden === false) {
                //playpause.hidden = true;
            } else {
                //playpause.hidden = false;
            }
        });
        
</script>

Is there anything I can do to make either the API function, or the <stream> tag work with a responsive height?

Forget about this, switched to Vimeo premium instead. Tad more expensive, but at least it works, plus the quality is a lot better.