Make embedded Soundcloud thumbnail printable with @media print

Question

When inserting an embedded Soundcloud player on a blog:

 <iframe width="500" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/271188615&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=true"></iframe>

it gives a nearly blank result when using the "Print" feature of the browser.

Question: is there a way (with @media print?) to make the printed result similar to what's displayed on the screen, i.e.:

Answer 1

Sorry, but no CSS on your domain will have effect on a page from other domain loaded on an iframe (it's for security reasons).

There are some ways to inject CSS on an iframe using JS but the iframe's domain should have the appropriate CORS rule set and it doesn't seems to be the case.

If this is really important for you, you could always make a screenshot of the player and use for cover the actual player only for printing…

Edit based on comments

There's is not native attribute to do what you asked, but you could do it yourself with a little bit of JS + CSS:

document.querySelectorAll('.soundcloud').forEach((iframe) => {
  var img_cover = iframe.getAttribute('cover');
  if (img_cover) {
    var org_html = iframe.outerHTML;
    var new_html = "<div class='soundcloud-iframe'>" +
      org_html +
      "<img src=" + img_cover + " width='500' height='300'>" +
      "</div>";
    iframe.outerHTML = new_html;
  }
});

.soundcloud-iframe img {
  display: none;
}

@media print {
  .soundcloud-iframe iframe {
    display: none;
  }
  .soundcloud-iframe img {
    display: block;
  }
}

<iframe cover="https://i1.sndcdn.com/artworks-000169258529-6odvu9-t500x500.jpg" class="soundcloud" width="500" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/271188615&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=true">
</iframe>