# Embed content in Anki using \<iframe\>

**URL:** <https://forums.ankiweb.net/t/embed-content-in-anki-using-iframe/2150>\
**Category:** Help\
**Created:** [August 11, 2020, 9:23am UTC](https://forums.ankiweb.net/t/embed-content-in-anki-using-iframe/2150 "2020-08-11T09:23:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![simon](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/simon/32/1093_2.png) [@simon](https://forums.ankiweb.net/u/simon)\
**Post date:** [August 11, 2020, 9:23am UTC](https://forums.ankiweb.net/t/embed-content-in-anki-using-iframe/2150/1 "2020-08-11T09:23:37Z")

</div>

Hello!

I have a problem with embedding a website using **iframe** in a card.

> Issue: 😂 The content just shows up for 1 second and then disapear.

This 👉 [GIF](https://i.imgur.com/nyLMrOj.gif) shows the issue.

- Anki Version: `2.1.30`
- Expected results: 👉 [Live demo on Code Pen](https://codepen.io/kopleran/pen/oNxjzML)
- Card template:

```html
<iframe src="https://v2.docusaurus.io" width="100%" height="500px"></iframe>

```

> I’ve replaced `v2.docsaurus.io` to `🔗` in all places because new users can’t use more than two urls in their post.

console error message:

> 1be78505.308bb7a7.js:2 DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.  
> at 🔗/1be78505.308bb7a7.js:2:15634  
> at al (🔗/main.b0f93f70.js:2:193730)  
> at gs (🔗/main.b0f93f70.js:2:212809)  
> at t.unstable\_runWithPriority (🔗/main.b0f93f70.js:2:231085)  
> at qa (🔗/main.b0f93f70.js:2:155545)  
> at ms (🔗/main.b0f93f70.js:2:212568)  
> at Jl (🔗/main.b0f93f70.js:2:204117)  
> at 🔗/main.b0f93f70.js:2:155836  
> at t.unstable\_runWithPriority (🔗/main.b0f93f70.js:2:231085)  
> at qa (🔗/main.b0f93f70.js:2:155545)  
> (anonymous) @ 1be78505.308bb7a7.js:2  
> 1be78505.308bb7a7.js:2 DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.  
> at 🔗/1be78505.308bb7a7.js:2:14924  
> at al (🔗/main.b0f93f70.js:2:193730)  
> at gs (🔗/main.b0f93f70.js:2:212809)  
> at t.unstable\_runWithPriority (🔗/main.b0f93f70.js:2:231085)  
> at qa (🔗/main.b0f93f70.js:2:155545)  
> at ms (🔗/main.b0f93f70.js:2:212568)  
> at Jl (🔗/main.b0f93f70.js:2:204117)  
> at 🔗/main.b0f93f70.js:2:155836  
> at t.unstable\_runWithPriority (🔗/main.b0f93f70.js:2:231085)  
> at qa (🔗/main.b0f93f70.js:2:155545)  
> (anonymous) @ 1be78505.308bb7a7.js:2  
> main.b0f93f70.js:2 DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.  
> at 🔗/1be78505.308bb7a7.js:2:16217  
> at al (🔗/main.b0f93f70.js:2:193730)  
> at gs (🔗/main.b0f93f70.js:2:212809)  
> at t.unstable\_runWithPriority (🔗/main.b0f93f70.js:2:231085)  
> at qa (🔗/main.b0f93f70.js:2:155545)  
> at ms (🔗/main.b0f93f70.js:2:212568)  
> at Jl (🔗/main.b0f93f70.js:2:204117)  
> at 🔗/main.b0f93f70.js:2:155836  
> at t.unstable\_runWithPriority (🔗/main.b0f93f70.js:2:231085)  
> at qa (🔗/main.b0f93f70.js:2:155545)  
> el @ main.b0f93f70.js:2  
> 1be78505.308bb7a7.js:2 Uncaught (in promise) DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.  
> at 🔗/1be78505.308bb7a7.js:2:16217  
> at al (🔗/main.b0f93f70.js:2:193730)  
> at gs (🔗/main.b0f93f70.js:2:212809)  
> at t.unstable\_runWithPriority (🔗/main.b0f93f70.js:2:231085)  
> at qa (🔗/main.b0f93f70.js:2:155545)  
> at ms (🔗/main.b0f93f70.js:2:212568)  
> at Jl (🔗/main.b0f93f70.js:2:204117)  
> at 🔗/main.b0f93f70.js:2:155836  
> at t.unstable\_runWithPriority (🔗/main.b0f93f70.js:2:231085)  
> at qa (🔗/main.b0f93f70.js:2:155545)

Since I’m not quite familiar with JS, Please give me a pointer so I can fix this issue.

Thanks

---

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/abdo/32/654_2.png) [@abdo](https://forums.ankiweb.net/u/abdo)\
**Post date:** [August 11, 2020, 9:45am UTC](https://forums.ankiweb.net/t/embed-content-in-anki-using-iframe/2150/2 "2020-08-11T09:45:43Z")

</div>

You need to set the appropriate attributes. See [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)

Try setting `sandbox="allow-same-origin"`

---

<div class="post-metadata">

**Author:** ![simon](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/simon/32/1093_2.png) [@simon](https://forums.ankiweb.net/u/simon)\
**Post date:** [August 11, 2020, 11:32am UTC](https://forums.ankiweb.net/t/embed-content-in-anki-using-iframe/2150/3 "2020-08-11T11:32:59Z")

</div>

Thank you very much.

With this attribute, the content do ✅ show up again. However, It results two new issues.

> ❌ 1. All buttons on the embedded site don’t work anymore.

> ❌ 2. very low contrast between background and text in night mode. (👉 [GIF](https://i.imgur.com/JDLBZbO.gif))

👉 [Live demo on Codepen](https://codepen.io/kopleran/pen/mdPeRKd)

---

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/abdo/32/654_2.png) [@abdo](https://forums.ankiweb.net/u/abdo)\
**Post date:** [August 11, 2020, 12:27pm UTC](https://forums.ankiweb.net/t/embed-content-in-anki-using-iframe/2150/4 "2020-08-11T12:27:21Z")

</div>

I recommend just putting a normal link to the page and opening it in the browser instead of embedding it.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 5:36am UTC](https://forums.ankiweb.net/t/embed-content-in-anki-using-iframe/2150/5 "2023-05-01T05:36:29Z")

</div>