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

In my 6 slides, I go from changing one thing in the html to changing/adding multiple things. 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. This tutorial shows (in layman's terms) how to CROP your Google Embed in Canvas. 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. 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. So, I made this mainly for those who DO NOT understand/like/care about html code. Whereas, most of us can handle dealing with numbers that equate to length and width. How I Chose These Fixes To me, the &rm=minimal is confusing because it doesn't equate with any real life stuff I know. If you want to know my reasoning and process, read on, otherwise, just click the tutorial and dive in! I used some different methods than the rm minimal to make it easier to understand for non-coders.

The link to my Google Slides Tutorial is here and at the bottom. I decided to make a tutorial to help fix all these things. TUTORIAL & GUIDE: I DON'T KNOW HTML but I Want to Make Google Embeds Pretty in Canvas And it even appears well on the mobile screen.

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. Try out the code on a separate page and resize your screen to see the magic.

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. 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. 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: What you need is a responsive embed! Check out and you can plug in your code under generic iframe. 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?

Html iframe code crop