Working with the video in embedded iframes – one this is that the background color never matches the site. Digging around I found a couple spots that user agent styles were getting in there and doing their thing. This boots them out.

 

// this should remove useragent body color that is added - keeping the iframe from being transparent 

window.onload = function () {
  document.body.style.backgroundColor = 'transparent';
}
document.addEventListener('DOMContentLoaded', function () {
  // Function to set background-color: transparent on body tag
  function setTransparentBackground(element) {
    element.style.backgroundColor = 'transparent';
  }

  // Call the function for the main page
  setTransparentBackground(document.body);

  // Call the function for each iframe in the main page
  var iframes = document.querySelectorAll('iframe');
  iframes.forEach(function (iframe) {
    iframe.addEventListener('load', function () {
      var iframeBody = iframe.contentDocument.body;
      if (iframeBody) {
        setTransparentBackground(iframeBody);
      }
    });
  });
});

 

Wordpress Enqueue

function remove_body_bgcolor()
{
  wp_enqueue_script('removebodybgcolor', get_stylesheet_directory_uri() . '/js/remove-color-from-body.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'remove_body_bgcolor');

 

 

 

https://www.geeksforgeeks.org/what-is-a-user-agent-stylesheet/

What is a User Agent Stylesheet ?

A user agent stylesheet is a pre-defined set of CSS rules that are built into a web browser and applied to web pages automatically. The purpose of the user agent stylesheet is to provide a consistent and standardized visual rendering of HTML elements across different web pages and websites. The rules in the user agent stylesheet define how HTML elements should be displayed by default, including things like font size, color, spacing, and alignment.

• User-agent stylesheets are provided by the browser and are applied before any styles defined in the web page itself.
• User-agent stylesheets are used to ensure a consistent and predictable visual appearance for HTML elements across different websites and web pages.
• User-agent stylesheets can vary between different browsers and versions of browsers, and can also be influenced by the operating system being used.
• User-agent stylesheets typically define basic styles for HTML elements, such as font size, line height, margins, and padding.
• Web developers can override the styles defined by the user agent stylesheet by defining their own styles in a stylesheet included with the web page, or by using inline styles.
• The specific styles applied by the user agent stylesheet can be inspected and modified using the developer tools provided by most web browsers

How does the user agent stylesheet work?

• A user agent stylesheet is a set of predefined style rules that web browsers use to render HTML documents. These style rules are built into the browser and apply to all HTML documents that are loaded in the browser.
• When a web page is loaded in a browser, the browser first parses the HTML and creates a Document Object Model (DOM) tree. The browser then applies the user agent stylesheet to the DOM tree to determine how the HTML elements should be displayed on the screen

Syntax:

Selector {
    property: value;
    property: value;
    property: value;
}

The syntax may vary depending on the browser being used. The syntax used in the current version of chrome is as follows:

 /*Syntax*/
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 8px;
    background-color: white;
    color: black;
    font-family: -apple-system, BlinkMacSystemFont, 
                 "Segoe UI", Roboto, Oxygen-Sans, 
                 Ubuntu, Cantarell, "Helvetica Neue", 
                 sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: bold;
    line-height: 1.2;
}

a {
    color: #1a0dab;
    background-color: transparent;
    text-decoration: none;
}

Example 1: In this example, we will give you a basic understanding that what an actual user-agent stylesheet is:

HTML

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>User Agent Stylesheet Example</title>
</head>

<body>
	<h1>Welcome To GeeksforGeeks</h1>
</body>

</html>

Output:

What is a user agent stylesheet?

In this example, we have a very basic HTML document with just an h1 element inside the body section. We have not defined any styles for the h1 element in our own stylesheet. When we load this page in a web browser and inspect the h1 element with the developer tools, we will see that it has some default styles applied to it. These styles are coming from the user agent stylesheet. The specific styles that are applied will depend on the browser that we are using. For example, in Google Chrome, the h1 element will have a font size of 2em, a margin-top of 0.67em, and a margin-bottom of 0.67em, among other styles.

Example 2: Another example to get more clarity about the user-agent stylesheet:-

HTML

  
  



  
Welcome To GeeksforGeeks

Output:

What is a user agent stylesheet?

In this example, we have an HTML document with a head section that includes a style tag. Inside the style tag, we define some basic styles for the body and h1 elements. We set the margin and padding of the body element to 0 and text-align as the center, and we set the color of the h1 element to green. We have also added a p element to the body section. We have not defined any styles for the p element in our own stylesheet. When we load this page in a web browser and inspect the p element with the developer tools, we will see that it has some default styles applied to it. These styles are coming from the user agent stylesheet.