How to apply transparent background to iframe? #393
-
|
I want to embed Steam Widget to my post with this <iframe src="https://store.steampowered.com/widget/244910/" frameborder="0" width="646" height="190"></iframe>Since
But instead, I get this white background.
This is not the problem of Steam Widget. I've used same HTML code at other site, and its background was transparent (showing site's background color). Adding How can I solve this problem? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
|
It works fine on light mode, and the issue happens on refreshing the pages on |
Beta Was this translation helpful? Give feedback.
-
|
My first guess was something is setting iframe's background color to white, but I couldn't find any style or attribute that does that on my web browser's inspector. In theory, if nothing is modifying background of iframe, its |
Beta Was this translation helpful? Give feedback.
-
|
I don't know how to fix, just tested in Google dark mode (
|
Beta Was this translation helpful? Give feedback.
-
|
I think only viable workaround is mimic Steam Widget's layout using shortcode. Fortunately, Steam provides API for it: https://store.steampowered.com/api/appdetails?appids=244910. I can grab Since I can't modify content of iframe because of SOP(Same-Origin Policy), this seems the only option for me. The situation has jumped out of the frying pan into the fire, but it seems this is only usable option 😂 |
Beta Was this translation helpful? Give feedback.
-
|
Well, it turned out that I can't fetch JSON from Steam. CORS or SOP or whatever the 'security stuff' blocks web browser to fetch it from Steam because client (web browser) is not on same domain of Steam. If then, I will just give up using iframe and shortcode. This thing is not that critical stuff to me, so I will just use 'link preview'-like shortcode for it. Thanks for the help! |
Beta Was this translation helpful? Give feedback.
-
|
You can also use Hugo getJSON to fetch API, there won't a CORS issues (I guess you're using JS?). // layouts/shortcodes/steam.html
{{- with getJSON "https://store.steampowered.com/api/appdetails?appids={{ .Get 0 }}" }}
{{- $data := dict }}
{{- range . }}
{{- $data = .data }}
{{- break }}
{{- end }}
<div class="bg-dark-subtle p-3 mb-3">
<p class="h5">{{ $data.name }}</p>
<div class="d-flex">
<div class="flex-shrink-0">
<img src="{{ $data.capsule_image }}" alt="{{ $data.name }}">
</div>
<div class="flex-grow-1 ms-3">
{{ $data.short_description | safeHTML }}
</div>
</div>
</div>
{{- end }}And then use the shortcode in content. {{< steam "244910" >}}Please note that, the API may has limitations, such as authentication, rate limit and number of requests, you can find those info on their docs and Hugo docs. |
Beta Was this translation helpful? Give feedback.
Well, it turned out that I can't fetch JSON from Steam. CORS or SOP or whatever the 'security stuff' blocks web browser to fetch it from Steam because client (web browser) is not on same domain of Steam.
If then, I will just give up using iframe and shortcode. This thing is not that critical stuff to me, so I will just use 'link preview'-like shortcode for it.
Thanks for the help!