# \[Solved\] Web Viewer help

**URL:** <https://community.thunkable.com/t/solved-web-viewer-help/1086018>\
**Category:** Questions about Thunkable X\
**Tags:** solved\
**Created:** [February 7, 2021, 8:13pm UTC](https://community.thunkable.com/t/solved-web-viewer-help/1086018 "2021-02-07T20:13:42Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![bader\_mouti](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bader_mouti/32/98887_2.png) [@bader\_mouti](https://community.thunkable.com/u/bader_mouti)\
**Post date:** [February 7, 2021, 8:13pm UTC](https://community.thunkable.com/t/solved-web-viewer-help/1086018/1 "2021-02-07T20:13:42Z")

</div>

any one can help me  
i want to add this code to web viewer to show it in my app

frame width=“560” height=“315” src=“[https://www.youtube-nocookie.com/embed/u0PrLVWDU4M?controls=0](https://www.youtube-nocookie.com/embed/u0PrLVWDU4M?controls=0)” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen\>\</iframe

THANK YOU

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [February 8, 2021, 11:58am UTC](https://community.thunkable.com/t/solved-web-viewer-help/1086018/3 "2021-02-08T11:58:59Z")

</div>

Create html file and use the frame element and its contents in the html file. Save it and upload to your project as file asset.

Use the name of the file in the web viewer URL.

---

<div class="post-metadata">

**Author:** ![bader\_mouti](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bader_mouti/32/98887_2.png) [@bader\_mouti](https://community.thunkable.com/u/bader_mouti)\
**Post date:** [February 8, 2021, 9:07pm UTC](https://community.thunkable.com/t/solved-web-viewer-help/1086018/4 "2021-02-08T21:07:06Z")

</div>

Thank you muneer  
But can you please explain more

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [February 9, 2021, 4:24am UTC](https://community.thunkable.com/t/solved-web-viewer-help/1086018/5 "2021-02-09T04:24:57Z")

</div>

@bader_mouti create an HTML file by copy-pasting this code:

```auto
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>example for bader mouti</title>
 </head>

<body>
  <iframe width=“560” height=“315” src=“Баста & Zivert - неболей - YouTube” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

</body>
</html>

```

Then, once you have saved your file,

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/8/98dc2d126c47eca9f350fc8299ea56c3326f1120.png) create a screen with a web-viewer.  
Then, got to the bottom of the component tree, where you can find your invisible components. Scroll down to ‘files’.  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/3/d392141b09c82085d5c2231db5d676c863c6e87e.png)  
Click that button, and select your html file: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/9/89e57cad59de9c7cbeb5d0e4909607c548f7b7e3.png)  
Now, go to your web-viewer, and set the URL of that web-viewer to the name of your HTML file.  
That’s it.

Hope this helped.  
Happy Thunking!

---

<div class="post-metadata">

**Author:** ![bader\_mouti](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bader_mouti/32/98887_2.png) [@bader\_mouti](https://community.thunkable.com/u/bader_mouti)\
**Post date:** [February 9, 2021, 3:36pm UTC](https://community.thunkable.com/t/solved-web-viewer-help/1086018/6 "2021-02-09T15:36:17Z")

</div>

thank you  
but i had did your steps step by step but its not working

 ![IMG_6341](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/d/ed4c7ece68402114c8e31f6844766c69f57603be.jpeg)

and i try to change the body code and its not working too

 ![IMG_6342](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/2/c292f9b7781f831363f82b1ebe622cde4508609f.jpeg)

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [February 9, 2021, 4:07pm UTC](https://community.thunkable.com/t/solved-web-viewer-help/1086018/7 "2021-02-09T16:07:55Z")

</div>

@bader_mouti why is the HTML visible? It shouldn’t be. Could you please post a picture of your project assets list and the way you set your web-viewer’s URL?  
Thanks.

---

<div class="post-metadata">

**Author:** ![ozel1978](https://avatars.discourse-cdn.com/v4/letter/o/3ec8ea/32.png) [@ozel1978](https://community.thunkable.com/u/ozel1978)\
**Post date:** [February 9, 2021, 4:09pm UTC](https://community.thunkable.com/t/solved-web-viewer-help/1086018/8 "2021-02-09T16:09:09Z")

</div>

check your html code. try at your computer first then if it worked definitely worked also in web viewer.

---

<div class="post-metadata">

**Author:** ![bader\_mouti](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bader_mouti/32/98887_2.png) [@bader\_mouti](https://community.thunkable.com/u/bader_mouti)\
**Post date:** [February 9, 2021, 4:20pm UTC](https://community.thunkable.com/t/solved-web-viewer-help/1086018/9 "2021-02-09T16:20:59Z")

</div>

First i create an HTML file by copy-pasting the code you give it to me

 ![Screen Shot 2021-02-09 at 6.13.21 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/9/b96a2fbb20fbc20e84e44a70bf0d3f9232bbc954.png)

then i saved the file on my app and the URL of that web-viewer to the name of my HTML file

 ![Screen Shot 2021-02-09 at 6.14.12 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/4/34b38dac0210da6df56ac935e5a94272beaf46e5.png)

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [February 9, 2021, 7:02pm UTC](https://community.thunkable.com/t/solved-web-viewer-help/1086018/10 "2021-02-09T19:02:25Z")

</div>

It seems you have a problem with your file.

I took your link in the iframe and did my own html file and this is the web test preview

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/d/6dfac5a90165d763b06c32b1faeb17482d84d48c.jpeg)

It is working ok. Just be sure to save your file in text without any formatting.

**[Update]**

This is the html file I used

```
<!DOCTYPE html>
<html>
<body>

<h1>The iframe example for Bader</h1>

<iframe src="https://www.youtube-nocookie.com/embed/u0PrLVWDU4M?controls=0" width="100%" height="300">
</iframe>

</body>
</html>
```

---

<div class="post-metadata">

**Author:** ![bader\_mouti](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bader_mouti/32/98887_2.png) [@bader\_mouti](https://community.thunkable.com/u/bader_mouti)\
**Post date:** [February 9, 2021, 7:19pm UTC](https://community.thunkable.com/t/solved-web-viewer-help/1086018/11 "2021-02-09T19:19:48Z")

</div>

Yes, muneer, you are right.  
I looked at YouTube how to create an HTML file on Mac, and i made mistakes in Save the file.  
but now its working good

@codeswept  
@muneer  
THANK YOU guys for your help

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [February 9, 2021, 7:20pm UTC](https://community.thunkable.com/t/solved-web-viewer-help/1086018/12 "2021-02-09T19:20:53Z")

</div>

Glad to know it works.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:29pm UTC](https://community.thunkable.com/t/solved-web-viewer-help/1086018/13 "2024-11-08T13:29:31Z")

</div>