[Solved] Web Viewer help

Questions about Thunkable
1

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” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe

THANK YOU

1 Like
3

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.

4

Thank you muneer
But can you please explain more

5

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

<!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
image362×664 11.1 KB
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
Click that button, and select your html file:
image
image768×374 4.95 KB

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!

2 Likes
6

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

IMG_6341
IMG_63411125×2222 193 KB

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

IMG_6342
IMG_63421125×2436 124 KB

7

@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.

1 Like
8

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

1 Like
9

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
Screen Shot 2021-02-09 at 6.13.21 PM742×692 81.8 KB

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
Screen Shot 2021-02-09 at 6.14.12 PM1360×953 97 KB

1 Like
10

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
image429×518 35 KB

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>
2 Likes
11

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

3 Likes
12

Glad to know it works.