Is it possible to have an html (https Only), to fullscreen the website inside?

Ask the community
,
1

I’m try to see if it’s possible to have an html (https Only), to fullscreen src with the website url inside? With just a click of a button, or is this not possible yet?

1 Like
2

The HtmlComponent has limitation for security and technical considerations. See the HtmlComponent API docs for more information. Follow the links to pages that detail limitations and usage.

3

For some reason, the html code still don’t similes to work?

export function button7_click(event, $w) {
    $w('#html1').allowFullScreen();
    console.log('HTML element is now in Fullscreen Mode');
}

The console.log is runs normally but, it don’t fullscreen? Did forget to add something?

4

I’m trying to clear this up for you. Hopefully will have an answer tomorrow.

5

BTW - the allowFullScreen() function only allows full screen, it doesn’t put it into full screen. Hopefully I can find an example how this works.

6

But is there a way to automatically put into full screen?

7

You might be interested in the new example on how to change an HTML element in an HtmlComponent to full screen. Take a look at Example: Fullscreen with HtmlComponent .

Have fun,

Yisrael

8

Thanks a lot !

Working great. I am new with HTML/CSS but here is an exemple of what I’ve managed to do with an icon button Open and Exit Fullscreen if it can help some of you.

                          ________________________________________________________

OPEN WIX EDITOR

In your page Wix Code :
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import wixWindow from ‘wix-window’;

$w.onReady(function () {
// does not change to full screen
// sets flag to allow full screen
// code in HtmlComponent will change to full screen
$w(“#html1”).allowFullScreen();
});

In HTML Iframe ()

Font Awesome Icons .fa_custom { background-color: black ; color: #dfdfdf ; outline:white ; position:absolute;z-index:1} .fa_custom:hover { background-color: black ; color: #ffffff } .fa_custom { top: 0; right: 0; } .fa_custom_exit { background-color: black ; color: #dfdfdf ; outline:white ; position:absolute } .fa_custom_exit:hover { background-color: black ; color: #ffffff } .fa_custom_exit { top: 0; right: 0; } #fullscreen { background-color: transparent; padding: 0px; border: 0px solid #000; } #fullscreen:-webkit-full-screen { width: 100% ; height: 100% ; } #fullscreen:-webkit-full-screen>button { position:absolute } 

                            ________________________________________________________

Copy/paste and Voilà ! :wink:

Best.

Mo

9

Hey Mo,

This is freakin’ awesome. Nice job.

Yisrael

10

Mo, this is ace! Thanks for sharing.

11

Hi!

i copied the code

$w.onReady(function () {
// does not change to full screen
// sets flag to allow full screen
// code in HtmlComponent will change to full screen
$w(" #html1 ").allowFullScreen(); });

But it says that #html1 is not a valid selector…
what should i write instead??
maybe is a stupid question but i’ve tried a couple of things and nothing works…
Thanks in advance! :slight_smile:

12

use just one #html and it should work

$w("#html1").allowFullScreen(); 

... that is if your htmlcomponent is call #html1
13

Thanks for your answer,
but i still have the same problem… there must be something that i am doing wrong…
how is possible to know the name of my htlmcomponent?
thanks again!

1378×243 58.9 KB

14

In the editor, click on Tools on the menu bar, then properties panel. Then click on your html component and look at the “id” that appears in the property panel. It seems that the component is not named “html1” on your page… hth

15

Hello, I implemented this… tested it in android and everything worked just fine… but then… in ios devices… it doesn’t work at all… What can it be?

16

Apple being Apple:
https://caniuse.com/fullscreen

Only the very latest versions will support it.

17

Any creative solution out of this… This just basically is destroying my plans for this year this very second…???

18

This forum is for Corvid only, but search engines are your friend…
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

19

Great!!! I see that is a code I need to implement in the HTML. The new question for me is how? That documentation says: Sets whether a web application runs in full-screen mode.:

So I’ve just tested it and doesn’t work. I didn’t search for it in the browser because I don’t even know what to search. Regarding code I just know the minimal… this is not my main area at all…
I just place that in the meta tag area at the beginning of the html code… nothing still…

20

Try stackoverflow, there’s usually an answer there for almost anything HTML related.