Iframe Embed with unwanted white around it with Bootstrap.
I've been updating my website recent to have bootstrap so it's a little easier to update every time I need to and as I am implementing the iframes I am having a lot of difficult with them and their weird white overflow background.
This is one of the frames behaving that way: "<div class="container text-center justify-content-center pt-5 embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="https://store.steampowered.com/widget/3256060/" frameborder="0" width="646" height="190" allowTransparency="true"></iframe> </div>" My body has "body class="text-bg-dark bg-black" and the website head has <meta name="color-scheme" content="light dark"> and data-bs-theme="auto" I've inspected every single line of code for this widget, every single css line and nothing gives me that weird unwanted white background. And the even stranger thing is that I have 2 other Iframes in the website that work perfectly! This one: <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/videoseries?si=lW8aIl5tpFDUb5-2&list=PL490bbVB6rzDuyvSrYhZbneyLpf0qOu0N" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> and this one: <div class="Discord-win-pc"><widgetbot server="742052327762034769" channel="760949504362676286" width="800" height="450"></widgetbot> <script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script></div> And yes I know that using Iframes isn't the best for security, but that is not an issue with this website, there is no sensitive material. Pls help me fix these ❤️
This is one of the frames behaving that way: "<div class="container text-center justify-content-center pt-5 embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="https://store.steampowered.com/widget/3256060/" frameborder="0" width="646" height="190" allowTransparency="true"></iframe> </div>" My body has "body class="text-bg-dark bg-black" and the website head has <meta name="color-scheme" content="light dark"> and data-bs-theme="auto" I've inspected every single line of code for this widget, every single css line and nothing gives me that weird unwanted white background. And the even stranger thing is that I have 2 other Iframes in the website that work perfectly! This one: <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/videoseries?si=lW8aIl5tpFDUb5-2&list=PL490bbVB6rzDuyvSrYhZbneyLpf0qOu0N" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> and this one: <div class="Discord-win-pc"><widgetbot server="742052327762034769" channel="760949504362676286" width="800" height="450"></widgetbot> <script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script></div> And yes I know that using Iframes isn't the best for security, but that is not an issue with this website, there is no sensitive material. Pls help me fix these ❤️
10 Replies
the iframe is working fine, but the <iframe> probably has a
white background (or the <body> or <html> or some element inside it)
set the <iframe> background to transparentThe iframe content has a transparent background.
I don't think that this is related to Bootstrap.
More it is an issue (browser bug) when using
color-scheme: dark; which is preventing the iFrame from getting transparency
This is the github bug report for this issue:
https://github.com/w3c/csswg-drafts/issues/4772GitHub
[css-color-adjust-1]
color-scheme should affect embedded iframes ...When a site contains iframes that specify their color-scheme either via the meta tag or the CSS property, the default text color changes, however, the background color is transparent, see this demo...
Apparently adding
<meta name="color-scheme" content="light dark"> in the iframe would fix this issue but I doubt that this is possible as they aren't controlled by you.99% sure this is the issue yes, I was researching and I had landed on this but none of the fixs work for my frames. gonna keep trying this way
You can give the iframe a specific background color that aligns with your page background
have tried, doesn't work even with !important
try this:
and you know the weird thing I've tested this on all browser and all of them get the white thing despite different themes
I LOVE U
thank u
so much
perfect fix all gone! ❤️
i didn't expect that to be the issue, but makes sense