Twitch Embed Loads iFrame Hidden

[Keegers02]

Hello!

I run https://interrealmssmp.com On the homepage we have an area that displays where all of our streamers are live. This works well except for the fact that the embed code loads the full iframe as hidden when you create a new Twitch.Embed

Is there a way to make the iFrame not load by default or is there a way (which I am being honest is beyond me) to make a new listener that invokes the Get-Streams Reference | Twitch Developers API call that will then create the listener if the data is not empty?

The reason for this is that I can see that it takes my website a LONG time to load and I want to see about reducing load times. I think this will drastically improve things as it loads 9 iFrames completely which is unnecessary.

Thank you,
Keegers02

[BarryCarlyon]

@Keegers02

On the homepage we have an area that displays where all of our streamers are live. This works well except for the fact that the embed code loads the full iframe as hidden when you create a new Twitch.Embed

that would seem to be you adding a class of hide to the embeds. Embed everywhere only writes to the contents of the div not the div itself.

I rechecked this with js disabled

Your divs start with the hide class.

@Keegers02

to make a new listener that invokes the Get-Streams Reference | Twitch Developers API call that will then create the listener if the data is not empty?

Sure write code to do that.
Normally your front end will call you backend and the backend will return the list of channels to show and you draw based on that.

@Keegers02

Is there a way to make the iFrame not load by default

The iFrame loads when you invoke it with javascript.
If you don’t want the iFrame yet, don’t invoke it yet.

Depending on how you layout your javascript, it’ll start processing when the page is ready or when you tell it to or part way thru loading when the JS file gets loaded.

@Keegers02

The reason for this is that I can see that it takes my website a LONG time to load and I want to see about reducing load times.

Loaded pretty fine for me to be honest

[Keegers02]

I am not manually writing the iFrames, the new Twitch.Embed does. Here is my code, its PHP and JavaScript

foreach($stlResult as $result){
        $twitchName = $result[0];
        echo "<!-- $twitchName --> \n\r";
        $twitchOptions = $twitchName . "Options";
        $twitchDiv = $twitchName . "Div";
        $twitchPlayer = $twitchName . "Player";
        ?>
        <div id="<?php echo $twitchDiv; ?>" class="hide"></div>
        <script>
        var <?php echo $twitchOptions; ?> = {
            width: "100%",
            height: "600px",
            channel: "<?php echo $twitchName; ?>",
            muted: true,
            parent: ["interrealmssmp.com", "www.interrealmssmp.com"]
        };
        var <?php echo $twitchPlayer; ?> = new Twitch.Embed("<?php echo $twitchDiv; ?>", <?php echo $twitchOptions; ?>);
        
        <?php echo $twitchPlayer; ?>.addEventListener(Twitch.Embed.VIDEO_READY, () => {
            var player = <?php echo $twitchPlayer; ?>.getPlayer();
            player.play();
        });
        </script>
        <?php
    }

[BarryCarlyon]

@Keegers02

I am not manually writing the iFrames, the new Twitch.Embed does.

yes thats what I meant by

@BarryCarlyon

The iFrame loads when you invoke it with javascript.
If you don’t want the iFrame yet, don’t invoke it yet.

The iFrame gets created when you invoke new Twitch.Embed if you don’t want an embed yet, don’t invoke one