Javascript API not working with iframe embeds


I am running into an issue with the Javascript API when using the iframe embed. On my localhost; 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="" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;"  allow="accelerometer; gyroscope; encrypted-media;" allowfullscreen="true"></iframe>
        <script src=""></script>
        <div id="playpause"></div>
<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){
                playing = true;
            } else {
                playing = false;

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

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.