Embed Google Slide Black Border

[allison_russell]

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?

[michaeleiben · Accepted solution]

Thank you so much Shar!

I used that website and your resource, but I still have some small black lines on the sides after I used the Responsive Embedder:

I added &rm=minimal after the 3000 to get rid of the navigation bar below the slide and this is what I ended up with:

I got rid of the navigation bar, but there are still black lines on the bottom, top, and right side as well.

I wonder if this just has to do with the screen resolution and if changing the dimensions for height and width (along with an adjusted percentage for the container) would fix that? I also wonder if it will look like this on our students' chromebooks after we've tweaked all of this code! If their resolution is different than ours, will it adjust?

Thanks so much!

Mike Eiben

[sgiedieviells]

Hi, 

1. Edit the page

2. Go into the HTML Editor

3. In the code, you will see the hex code for the black border. It should look like '#000000'

4. You can delete it or change it to white '#ffffff'

[swhite4]

I have the same issue, and there is no hex code.

[caydshel]

Could you please post the copy of your embedded code and perhaps we could add the #fffff to remove the black border.  I don't know where the #00000 is located in the html code.  

Thank you!

[swhite4]

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRVQReCfoVN0d5W1bvzT3PxNvQL0DYmhYV9v66klIA-KXA-KszTz..." frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

[swhite4]

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRVQReCfoVN0d5W1bvzT3PxNvQL0DYmhYV9v66klIA-KXA-KszTz..." frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

[Shar]

Hi swhite4,

Looking at your code, I take it that's what you got from Google when you click Publish to Web? And you're trying to get rid of the black bars on the top and bottom when the size of the browser window changes, right?

What you need is a responsive embed!  Check out http://embedresponsively.com/ and you can plug in your code under generic iframe.

I used the size dimensions in your code to figure out the ratio: 569 / 960 * 100 = 59.27% and I also converted the CSS code into an inline style for you:

<div class="embed-container"
 style="position: relative; padding-bottom: 59.27%; height: 0; overflow: hidden; max-width: 100%;">
 <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
  src="https://docs.google.com/presentation/d/e/2PACX-1vRVQReCfoVN0d5W1bvzT3PxNvQL0DYmhYV9v66klIA-KXA-KszTzFA-o_3atQMu97RIlXh3_Prx4tSJ/embed?start=false&amp;loop=false&amp;delayms=3000"
  width="960" height="569" allowfullscreen="allowfullscreen"
  webkitallowfullscreen="webkitallowfullscreen"
  mozallowfullscreen="mozallowfullscreen"></iframe></div>

If you change the width and height dimensions in the IFRAME , be sure to recalculate the ratio for the padding-bottom in the surrounding DIV. This trick makes is so that the DIV container recalculates itself based on the size of the screen while the IFRAME expands to fill the available size of the DIV. Try out the code on a separate page and resize your screen to see the magic. You'll still get black bars on the sides, because of the google slide dimensions itself, but it's better than the ever increasing black border on the top and bottom. And it even appears well on the mobile screen. 😁

Hope the code helps ya out,
Cheers - Shar⭐

Spoiler

Use http://embedresponsively.com/ to create responsive iframe embeds.

[MarissaSarandos]

I am having the same issue with black bars, I tried to use this info but I still have small ones 😞

Here is a video that shows you how to remove the controls ..... just add &rm=minimal after 3000

https://www.youtube.com/watch?v=kofR2_FNaV8

[michaeleiben · Accepted solution]

Thank you so much Shar!

I used that website and your resource, but I still have some small black lines on the sides after I used the Responsive Embedder:

I added &rm=minimal after the 3000 to get rid of the navigation bar below the slide and this is what I ended up with:

I got rid of the navigation bar, but there are still black lines on the bottom, top, and right side as well.

I wonder if this just has to do with the screen resolution and if changing the dimensions for height and width (along with an adjusted percentage for the container) would fix that? I also wonder if it will look like this on our students' chromebooks after we've tweaked all of this code! If their resolution is different than ours, will it adjust?

Thanks so much!

Mike Eiben

[Shar]

Hi Mike @michaeleiben ,

You can tweak the ratio percentage a bit to eliminate the black border on the sides, but I wouldn't worry too much since it's a relatively small border compared to not using a responsive embed.

I noticed in your example you're using the Google Slide to create a clickable image map. A couple weeks ago some folks reported that they were no longer able to click on links in their embedded Google Slides. But I guess it's back to working again. Hey that's an ingenious way to get an image map!

I just tried it out and the clicked links open in a new tab. Did you get your links to open in the same window?

Cheers - Shar ⭐

[gsullib · Accepted solution]

@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

[SparkleTeacher]

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 

[dnassetta]

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

[rozarbeh]

Hi Allison!  How were you able to include links in your Google Slide to other course pages?

[kimberly_ellis]

While many of the previous comments show how to make the Google Slide minimal (removing the black bar at the bottom), it doesn't always get rid of the black excess around the top and bottom of the slides. I found this great video that shows how to fix it! 

https://www.youtube.com/watch?v=f0KOOWb3fwg