cancel
Showing results for 
Search instead for 
Did you mean: 

Embed Google Slide Black Border

Jump to solution

I have embedded a Google Slide into my front page with links to different course components (see image). I keep getting a black box around the slide. I understand that this is due to the size of the embedded content, and I can go in and change the height and width and the box will disappear. However, it will reappear with different parameters on the screen (for instance, if I zoom in or out it will appear and disappear, if I hide  the course navigation window the black border disappears, but reappears when the navigation window is toggled back on). Is there a work-around for this?

353627_Capture.JPG

353628_2.JPG

12 Replies

@Shar Thank you SO MUCH for this post!  This was incredibly helpful and exactly what I needed.  I ended up using the code you provided and just putting in my own URL (and adding &rm=minimal to get rid of the Google Slides bar at the bottom).  Now my black bars are tiny and it looks great on the Canvas app (which I think a good amount of students will use).

Thank you for sharing your expertise!

--Gillian

View solution in original post

Surveyor

TUTORIAL & GUIDE: I DON'T KNOW HTML but I Want to Make Google Embeds Pretty in Canvas

Okay so this was bugging me, too. I decided to make a tutorial to help fix all these things. The link to my Google Slides Tutorial is here and at the bottom. I used some different methods than the rm minimal to make it easier to understand for non-coders. If you want to know my reasoning and process, read on, otherwise, just click the tutorial and dive in!

How I Chose These Fixes To me, the &rm=minimal is confusing because it doesn't equate with any real life stuff I know. Whereas, most of us can handle dealing with numbers that equate to length and width. So, I made this mainly for those who DO NOT understand/like/care about html code. I added more advanced info for those who know some html or understand it (or want to understand it) The green text explains what html does in each case-if you want to know. This may not be the shortest workaround, but it's the simplest to add/adapt for those who don't really care about or want to care about html.

This tutorial shows (in layman's terms) how to CROP your Google Embed in Canvas. Basically, you can get rid of the Google bottom toolbar, get rid of black sides on a Google Canvas embed, and/or remove black top/bottom (keeping or removing toolbar) on a short wide slide.

In my 6 slides, I go from changing one thing in the html to changing/adding multiple things. I also address making a Google Drive Embed the right size for any screen (one simple change) so your students never have an embed that's too big for their screens (eliminates them having to scroll or saying your embed is cut off.)

I included the code, and green highlighted where you add something and orange highlighted where you change something that's already there. Note that your ratios of width to height might be different than mine. I recommend changing ONE thing at a time, then saving in order to see what that one change did to your embed.

HTML for Beginners in Canvas-HTML edit: Note when you're in the RICH TEXT editing screen, what you see is NOT always what you see on the final product (ie when you hit SAVE), so before you think it didn't work, hit save and look 🙂 Also, randomly, Canvas (or Google, not sure which) will remove your html that you added. Non random code removal most often happens if you forget to add a unit like "px" or "%" after all your dimensions, or if every start tag <something> doesn't have a corresponding end tag </something>. Sometimes, Canvas adds your end tag for you. The best way to avoid your html being changed is hitting SAVE after html edit instead of returning to rich text. 

I hope this helps!

https://docs.google.com/presentation/d/1O0khLoABYPtOrJkmkO5gSq-jxsTtPy5-9bw7rpAX_Cc/edit?usp=sharing 

I didn't really understand this...but tried a few of the steps anyway...and it worked! Thank you!