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

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

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.

1 Like

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?

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

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.

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

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

1 Like

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

1 Like

Hey Mo,

This is freakin’ awesome. Nice job.

Yisrael

Mo, this is ace! Thanks for sharing.

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:

use just one #html and it should work

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

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

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!

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

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?

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

Only the very latest versions will support it.

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

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

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…

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