Twitch Embed Loads iFrame Hidden


I run 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,


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.

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.

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.

Loaded pretty fine for me to be honest

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>
        var <?php echo $twitchOptions; ?> = {
            width: "100%",
            height: "600px",
            channel: "<?php echo $twitchName; ?>",
            muted: true,
            parent: ["", ""]
        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();

yes thats what I meant by

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.