iframes added after page interaction can not be unmuted on iOS

I am running into an issue where I am adding more content as the user scrolls down a page, some of that content is TikTok videos. However, when I load more Tiktok videos, I want to unmute them if the user already pressed Unmute. When I do, the video pauses (only on iOS) and browserstack shows an access violation on the “unmute”. I made a codepen to replicate. However, in the codepen it does not work at all on any browser, Desktop or mobile.

Does anyone know of a workaround or method to help?
https://codepen.io/jidler04/pen/qBzPJOq

    iframe.contentWindow.postMessage({ type: 'unMute', value: true, 'x-tiktok-player': true }, '*');

I have tried adding “allow autoplay” This fixes the issue outside of codepen for everything besides iOS chrome & Safari.

The videos should be able to be unmuted since there was already interaction allowed.