UnderSkinning: a mixcloud player hack

I was playing around with integrating a mixcloud player in the blog and took a stab at trying to reskin the REACT component based player with javascript/css.

After a lot of trial and error and finally remembering about cross-site script security, I realized straight up DOM manipulation was out of the question.

SO.. I came up with UnderSkinning!

const mcPlayer_iFrame = jQuery('#text-3 > div > iframe')

jQuery(() => {
  mcPlayer_iFrame.parent()
    .parent()
    .css({
      "background-image": "url(https://fuzzywarble.com/wp-content/uploads/2020/10/ISOLATE_WITH_THIS--cover-full.png)",
      "background-blend-mode": "overlay",
      "background-size": "100% 180px",
      "background-repeat": "no-repeat"
    })

  mcPlayer_iFrame.parent()
    .css({
      "opacity": "80%"
    })
 })
})

Now I can create playlist skins if needed. If only I could figure out how to read events from the player…