Convert Soundcloud thumbnail into a printable format using the @media print CSS rule

For those wanting to add 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>

If you try to print using the browser's "Print" feature, the result is almost blank.

So the question is: how can we use @media print to ensure that the printed version looks similar to what's shown on screen, like this:

https://i.stack.imgur.com/4cVmnm.png

Answer №1

Unfortunately, CSS from your domain cannot affect a page from another domain loaded in an iframe due to security measures.

While there are some methods to inject CSS into an iframe using JS, the domain of the iframe must have the necessary CORS rule set, which appears to not be the case in this situation.

If it is crucial for you, one workaround could be to take a screenshot of the player and overlay it on top of the actual player only for printing purposes...

Edit based on comments

There is no built-in attribute to achieve your request, but with a little bit of JS + CSS, you can do it yourself:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigate to the editing page with Thymeleaf in the spring framework, where the model attribute is passed

My goal is to redirect the request to the edit page if the server response status is failed. The updated code below provides more clarity with changed variable names and IDs for security reasons. Controller: @Controller @RequestMapping("abc") public clas ...

What advantages does creating a class that can freely float in either direction offer?

Recently, I noticed a common trend on websites like : .left { float: left; } <div class="col two left" /> Is this considered best practice? It goes against the idea of creating classes solely for styling purposes. If we wanted to change the floa ...

Implement the MathJax package for automatic word wrapping of mathematical

I have implemented additional processing for MathJax using the following code snippet: <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [["$","$"],["\\(","\\)"]] }, "HTML-CSS": { ...

As the user scrolls down, the navigation becomes obscured by the content

Whenever I scroll down on my website at Bradly Spicer, the navigation menu extends and ends up falling behind the content. This is the script I am using: .menu { position: relative; z-index:9999; } .post { background: #fff; border: 1px solid #ddd; font- ...

The addition of a cancel swipe feature to an HTML5 eBook is causing the text input field for note-taking to malfunction

I am currently working on the development of a process to create HTML5 based eBooks for both desktop and mobile use using Adobe InDesign and exporting them with a plugin called In5. This plugin allows for the incorporation of html, css, and javascript duri ...

How can I use jQuery to set a background image and position on a website?

I am trying to incorporate a background image fade effect along with the color fade in and out when hovering over a link using my current code. However, I am unsure of how to set the background image and position within the code. $(document).ready(funct ...

What is the best way to make a JavaScript cookie remember the state of a DIV?

Seeking assistance with a test site here that is currently in development. I am attempting to make the notification at the top remain hidden once the close button is clicked. Below is my current script: <style type="text/css"> <!-- .hide { displ ...

A cookie designed to store and retain the preferred CSS stylesheet choice

I'm looking to create a cookie that will store the preference for a specific CSS stylesheet. I currently have a function in place that allows me to switch between stylesheets: function swapStylesheet(sheet){ document.getElementById('pagestyl ...

EU directive on cookies: What is the best way to store your preferences?

While there are numerous third-party solutions available to comply with the cookie EU directive, I prefer to learn how to implement it myself. My specific requirement is that when a user clicks on "Accept", their choice should be remembered for the entire ...

Blending PHP with jQuery

I'm currently working on the same page as before but this time, I'm using it to experiment with jQuery. I'm trying to learn it for my 'boss', but unfortunately, I can't seem to get the JavaScript in this file to run at all, le ...

The hyperlink does not function properly when included within an <input type=button> element

I have encountered an issue with the code below. In my project, I have a search bar along with some buttons. Currently, only the hyperlink of the search button is functioning correctly. The other buttons seem to redirect to the same link as the search bu ...

TinyMCE file multimedia upload feature allows users to easily add audio, video

I am looking to enhance the functionality of my TinyMCE Editor by enabling file uploads for audio/video and images. Although image uploading is functioning properly, I am encountering issues with other types of files. Despite setting up pickers throughout, ...

Place centered items within a flexbox that uses space-between alignment

When designing a navigation section, I am looking to achieve space-between justification. However, for smaller screens where the navigation items may need to wrap onto multiple rows, I want the items to center themselves instead of aligning to the left whe ...

Issues encountered with PHP integration for Bootstrap carousel

I'm facing a challenge with modifying an existing carousel to load data from an SQL database instead of hardcoding it. After successfully fetching the data using PHP, I noticed that the controls of the carousel are not functioning as expected. Upon i ...

I am experiencing issues with the functionality of front-page.php on my WordPress website

Seeking guidance in addressing a web development issue: I have encountered a problem with a website that I am currently working on locally using WordPress. I added the following code to the header.php file: <link rel="stylesheet" type="text/css" href= ...

Troubleshooting Problem: Adjusting the hover border color for TextField in ReactJS Material UI

I'm having trouble setting the hover border color of a TextField to a theme variable. It seems that in order for the hover borderColor to work, it needs the "!important" tag. However, I am unsure of how to incorporate this into the theme variable. Th ...

Tips for implementing a waiting period during an ajax request using jQuery

My current task involves calling a URL to generate a token and then opening another page on the same site once the token is generated. The issue I'm facing is that the window generating the token closes quickly, making it difficult for me to authentic ...

"Using HTML to assign a unique identifier to an image within

Apologies in advance for any errors as I am relatively new to html. I am attempting to construct a table with images that have onclick events, so that each clicked seat is tracked and its id is added to a list to change the class. Each image has been give ...

It is impossible for me to utilize inline SVG as a custom cursor in CSS

Below is the code I have written. I am attempting to change the cursor using an inline SVG, but it doesn't seem to be working as expected. However, when I use the same code as a background, it works perfectly: .container { width: 50vw; height: ...

Tips for preventing the bootstrap modal from disappearing during auto postback in asp.net

I am currently using vb.net in my asp.net project along with Bootstrap 4. Within a modal, I have two dropdown lists. The goal is for the second list to be sorted based on the user's selection from the first list. However, I encountered an issue where ...