# Embedding websites in a Zoom App

**URL:** <https://devforum.zoom.us/t/embedding-websites-in-a-zoom-app/79965>\
**Category:** Zoom Apps\
**Created:** [December 8, 2022, 4:49pm UTC](https://devforum.zoom.us/t/embedding-websites-in-a-zoom-app/79965 "2022-12-08T16:49:54Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![findprajju](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/findprajju/32/43633_2.png) [@findprajju](https://devforum.zoom.us/u/findprajju)\
**Post date:** [December 8, 2022, 4:49pm UTC](https://devforum.zoom.us/t/embedding-websites-in-a-zoom-app/79965/1 "2022-12-08T16:49:54Z")

</div>

I’m trying to build a Zoom App to be able to play YouTube videos within Zoom. I wish to embed a YouTube video, and I’ve allowed [youtube.com](http://youtube.com) in my domain list. However, when I open my app in either my browser or the Zoom client, the box where YouTube is supposed to be embedded instead shows a white box and reads “This content is blocked; contact the site owner.” There has already been a forum post about this topic, and I tried the fix it suggested (which was to add the embedding domain into the allow list) but that didn’t work. Can someone please help me resolve this?

Here’s my embed code:

```nohighlight
 p You're viewing your Zoom App through the browser.&nbsp;
    a(href=`/install`) Click Here
    | &nbsp;to install your app in Zoom.
    iframe(width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY") 

```

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [December 9, 2022, 8:02pm UTC](https://devforum.zoom.us/t/embedding-websites-in-a-zoom-app/79965/2 "2022-12-09T20:02:49Z")

</div>

Are there any console errors here that might indicate what’s happening? I expect you will need to put an `unsafe-eval` or `unsafe-inline` in the CSP header you’re using.

Likewise, you mentioned there was a solution in another post. Can you link that post here?

---

<div class="post-metadata">

**Author:** ![findprajju](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/findprajju/32/43633_2.png) [@findprajju](https://devforum.zoom.us/u/findprajju)\
**Post date:** [December 9, 2022, 11:54pm UTC](https://devforum.zoom.us/t/embedding-websites-in-a-zoom-app/79965/3 "2022-12-09T23:54:28Z")

</div>

The error I receive is:

```auto
Refused to frame 'https://www.youtube.com/' because it violates the following Content Security Policy directive: "default-src self". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

```

Here’s the link to the other post: [Iframe in a Zoom app - Zoom Apps - Zoom Developer Forum](https://devforum.zoom.us/t/iframe-in-a-zoom-app/77102)

Where/how do I add a CSP header? And what should its contents be?

---

<div class="post-metadata">

**Author:** ![chrisewald](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/chrisewald/32/42118_2.png) [@chrisewald](https://devforum.zoom.us/u/chrisewald)\
**Post date:** [December 12, 2022, 4:25pm UTC](https://devforum.zoom.us/t/embedding-websites-in-a-zoom-app/79965/4 "2022-12-12T16:25:12Z")

</div>

Hi @findprajju

Content Security Policy (CSP) headers are set on the response coming from the backend server. In this case, you need to add another domain to the frame-src portion. Generally this is done in server middleware.

Take a look here to see how it is set in the Zoom example app: [zoomapps-advancedsample-react/middleware.js at d4c7c9a3001a57b8b4e5e93b727d7babb8dffd31 · zoom/zoomapps-advancedsample-react · GitHub](https://github.com/zoom/zoomapps-advancedsample-react/blob/d4c7c9a3001a57b8b4e5e93b727d7babb8dffd31/backend/middleware.js#L15-L18)

and: [zoomapps-advancedsample-react/server.js at d4c7c9a3001a57b8b4e5e93b727d7babb8dffd31 · zoom/zoomapps-advancedsample-react · GitHub](https://github.com/zoom/zoomapps-advancedsample-react/blob/d4c7c9a3001a57b8b4e5e93b727d7babb8dffd31/backend/server.js#L28)

---

<div class="post-metadata">

**Author:** ![findprajju](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/findprajju/32/43633_2.png) [@findprajju](https://devforum.zoom.us/u/findprajju)\
**Post date:** [December 14, 2022, 12:16am UTC](https://devforum.zoom.us/t/embedding-websites-in-a-zoom-app/79965/5 "2022-12-14T00:16:12Z")

</div>

Thank you very much for your help. I have my iframe working in the browser.

However, when I open my app in Zoom, the iframe does not show up.  
According to the network console, the request is processed with an HTTP 403 error.  
Here is the code I use to embed my YouTube video into Zoom:

```auto
if isZoom
        p Welcome to your Zoom App
        iframe(width="60%" height='600' src="https://www.youtube.com/embed/c6XHSwrUbeQ") 

```

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [December 19, 2022, 8:47pm UTC](https://devforum.zoom.us/t/embedding-websites-in-a-zoom-app/79965/6 "2022-12-19T20:47:14Z")

</div>

Have you added [youtube.com](http://youtube.com) to the domain allow list?

---

<div class="post-metadata">

**Author:** ![findprajju](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/findprajju/32/43633_2.png) [@findprajju](https://devforum.zoom.us/u/findprajju)\
**Post date:** [December 20, 2022, 11:39pm UTC](https://devforum.zoom.us/t/embedding-websites-in-a-zoom-app/79965/7 "2022-12-20T23:39:02Z")

</div>

Yes, I have added to my domain allow list. It still doesn’t work…

---

<div class="post-metadata">

**Author:** ![narmadaravali](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/narmadaravali/32/39496_2.png) [@narmadaravali](https://devforum.zoom.us/u/narmadaravali)\
**Post date:** [December 21, 2022, 8:51pm UTC](https://devforum.zoom.us/t/embedding-websites-in-a-zoom-app/79965/8 "2022-12-21T20:51:14Z")

</div>

Could you regenerate your publishable URL after updating domain allow list?

---

<div class="post-metadata">

**Author:** ![findprajju](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/findprajju/32/43633_2.png) [@findprajju](https://devforum.zoom.us/u/findprajju)\
**Post date:** [January 15, 2023, 5:28pm UTC](https://devforum.zoom.us/t/embedding-websites-in-a-zoom-app/79965/9 "2023-01-15T17:28:51Z")

</div>

My app isn’t published yet; I’m still developing it using `ngrok` as a server. As a matter of curiosity, how would I deploy my app when I’m finished developing it?

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [January 18, 2023, 2:26am UTC](https://devforum.zoom.us/t/embedding-websites-in-a-zoom-app/79965/10 "2023-01-18T02:26:13Z")

</div>

Please make sure that you have added [www.youtube.com](http://www.youtube.com) to your _domain allow list_ and re-install your application.

After that, ensure that you have added the embed URL to the **frame-src** field of your CSP header.

With that, you should be able to display an embedded YouTube video without an issue. I hope that helps! Let me know if you have any questions.
