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
