Question

How can you change iFrame / punch-viewer background color

  • 28 July 2022
  • 0 replies
  • 275 views

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%);

}


0 replies

Be the first to reply!

Reply