cancel
Showing results for 
Search instead for 
Did you mean: 
allison_russell
Surveyor

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

1 Solution

Accepted Solutions

@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

12 Replies
sgiedieviells
Surveyor II

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'

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

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!

<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>

<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>

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.

 

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

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:

michaeleiben_1-1598391695754.png

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:

michaeleiben_0-1598391602031.png

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

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