Hello!
I have been trying to figure out a way to change the color of the background within a Google Slides iFrame widget. Currently the issue is that I can get the iframe to display at full size within its container, however it always leaves a slight black border along the bottom and right sides of the element, as seen here:
I’ve placed the iframe into a div container will maintain its aspect ratio and scale to fill the entire area and hide any overflow. I’ve set the background, background-color, and color to match our general background yet it always inherits the same black color. The culprit appears to be a .punch-viewer-[element] when inspecting the page.
Does anyone know of a workaround for setting the default color of the container?
Current Custom CSS
/*Container for Department Org Information Slides from Intern Project*/
/*Div Container for scaling slides iframe */
.google-slides-container{
position: 0;
aspect-ratio: 16 / 9;
width: 100%;
padding-bottom: auto;
padding-top: auto;
overflow: hidden;
color: #f7f9ff !important;
box-shadow: none;
}
/*Department Information iframe element*/
.google-slides-container iframe{
position: absolute;
top: 0;
left: 0;
padding-right: -1px;
width: 101%;
height: 101%;
background: #fff;
}
/*Sets background color of iframe container to match site background to appear transparent*/
.clearfix {
background-color: #fff !important;
background: #fff;
color: #fff;
}
/*Hides overflow from iframe slides to remove black background*/
.punch-viewer-body {
overflow: hidden;
background: #fff;
}
.punch-viewer-content {
overflow: hidden;
background: #fff;
}
.punch-viewer-container {
overflow: hidden;
background: #fff;
}
/*Hides overflow from iframe slides to remove black background*/
.punch-viewer-page-wrapper iframe{
overflow: hidden;
border: none;
width: 100%;
height: 100%;
color: !important #f7f9ff;
background: !important #f7f9ff;
background-color: #f7f9ff !important;
}
/*Removes drop shadow from dept info container*/
.wrapper-shadow{
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0%);
}