Iframe not fully loaded at first but works after refresh

Question

I have an embedded music player from Bandcamp on my website and it will often not load fully the first time the page is loaded, but it will work properly after a refresh. It does load partially, though. The image at the top and the songs in the playlist won't show up but the area in the middle with the current song will.

I normally test this by opening the site in a Chrome incognito window and about 2/3rds of the time it will not load the iframe properly but sometimes it does. I'm on Wordpress and I've tried disabling both W3 Total Cache and Cloudflare but that doesn't seem to affect it. Any ideas or any way to check if the iframe has loaded fully and if not to automatically refresh it?

The website is https://civilaudio.com Thank you!

The iframe code is:

<iframe id="home_mobile_bandcamp_player" src="https://bandcamp.com/EmbeddedPlayer.html/ref=https%253A%252F%252Fcivilaudio.com%252F/album=2271044833/size=large/bgcol=ffffff/linkcol=333333/artwork=none/transparent=true/" seamless><a href="https://civilaudio.bandcamp.com/album/selected-audio-samples">Selected Audio Samples by Civil Audio by Michael Briggs</a></iframe>

Screenshot of problem

Answer 1

I think I found a solution. If I add a random fake query string to the end of the URL in the iframe it will force it to reload properly.

<iframe id="bandcamp_iframe_left" style="border: 0; width: 100%; height: 900px;" seamless></iframe>
<script>
var iframe = document.getElementById('bandcamp_iframe_left');
iframe.src = 'https://bandcamp.com/EmbeddedPlayer.html/ref=https%253A%252F%252Fcivilaudio.com%252F/album=2271044833/size=large/bgcol=ffffff/linkcol=333333/transparent=true/?ignore='+Math.floor(Math.random() * 1000);
</script>