Jump to content

Change background color around a PDF embedded in an iframe

Recommended Posts

I embedded a PDF which shows a gray background on a monitor. I would like the background to be transparent or white. I know how to adjust the sizing inside the embed data box but can't change the gray background. I'm not sure if I need to change it in the embed data box or in the Custom CSS section of the site. Regardless, I've tried both and failed. I need the CSS and where to put it. Can anyone please help me? 
Thank you very much,
CJ

https://michael-james-4flv.squarespace.com/config/pages

https://www.blueridgeresearch.com/careers

image.png.6482a4b68d5d355c7b5acd468cf8830b.png

image.thumb.png.787bda29590fe166fefa2d01fb933a11.png

Link to comment
  • Replies 6
  • Views 2.8k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Unless there is an option for background color from where the code was generated, it can't be modified through adding CSS in Squarespace.

This is a web security feature. Documents on one domain can not effect changes to a document on another domain. In this case squarespace.com and google.com.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thank you Creedon. I uploaded the PDF directly to my library in Squarespace and then embedded it. That solved the problem of the gray background around the PDF. However, now the PDF does not appear correctly on the phone. It does not resize for devices. I changed the width to 50% and some other settings but it does not change. It appeared correctly on devices before, when the PDF resided on Google Docs. So, is it one or the other? Here is a screen shot of the embed data pointing to PDF residing on Squarespace.

image.png.8fb780faae1152409f07d6063325cee4.png

Link to comment

Try the following.

<iframe src="https://static1.squarespace.com/static/565ba902e4b0b80773a74760/t/64b9e29c6eccbd750786c7e1/1689903823616/Launch%2BYour%2BCareer%2BWith%2BBRRC%2Bv2.pdf"></iframe>

And if that doesn't work then the following.

<iframe data-embed="true" data-image-dimensions="600x780" src="https://static1.squarespace.com/static/565ba902e4b0b80773a74760/t/64b9e29c6eccbd750786c7e1/1689903823616/Launch%2BYour%2BCareer%2BWith%2BBRRC%2Bv2.pdf&amp;embedded=true"></iframe>

You had some syntax errors and other potential cruft in your code.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Really appreciate your help. Tried both solutions you provided. Both look fine on the monitor but neither resized for the device view. I made sure to refresh and even closed out and then reopened on the phone. Phone view looks like this. Only showing the upper left corner.

image.thumb.png.b85277e0d7fded8635abd46a3a1f7c32.png

Link to comment

Creedon, I had to revert back to the original embedded code which opens the PDF in Google Docs because that is the only way it resizes for the phone/devices. See my first message in this thread for screen shots. So, it still has the gray background. I would like to either change the gray background to white or resize the pdf to fill the block so the gray background doesn't show. Changing the width and height attributes doesn't do anything. Absolutely no changes. Do you have any suggestions for me?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.