Fix Zype player full-screen issue on Wix websites Fix Zype player full-screen issue on Wix websites

Fix Zype player full-screen issue on Wix websites

This article proposes a solution for allowing full-screen functionality on web embeds added to Wix websites.

Add More > Embeds > HTML iframe

Wix_Website_Editor_-_mysite.jpg

Once the embed code is added to your website, you will need to enable Corvid from the top menu. This will unlock the code console on the Preview footer:

Fullscreen_4_30_19__10_17_AM.jpg

Fullscreen_4_30_19__10_22_AM.jpg

The following JavaScript function must be added either at the page level on any page with a Zype player or the site level of the code console for the full screen to work.

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
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();

});

Then you drag an HTML iframe code widget on the page you want the player to be on and use the following code, just replacing the Zype embed code in my example with whatever Zype player you wish to publish.


<!DOCTYPE html>

<html>

 

<head>

<meta charset="utf-8">

 

<title>Font Awesome Icons</title>

 

 

<style type="text/css">

.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; }

 

 

<style type="text/css">

#fullscreen {

background-color: transparent;

padding: 0px;

border: 0px solid #000;

</head>

}

 

#fullscreen:-webkit-full-screen { width: 100% ; height: 100% ; }

#fullscreen:-webkit-full-screen>button { position:absolute }

 

 

</style>

 

 

</style>

 

<button id="fullscreen-button" class="fa fa-arrows-alt fa_custom" style="font-size:23px"></button>

 

<div id="fullscreen">

 

//Replace Example Zype player code below

 

EMBED CODE HERE

<section>

 

<button type="button" button id="exit-fullscreen-button" class="fa fa-arrows-alt fa_custom_exit" style="font-size:23px;position:absolute"></button>

 

</section>

 

 

</div>

 

<script>

 

 

var fullscreenButton = document.getElementById("fullscreen-button");

var fullscreenDiv = document.getElementById("fullscreen");

var fullscreenFunc = fullscreenDiv.requestFullscreen;

if (!fullscreenFunc) {

['mozRequestFullScreen',

'msRequestFullscreen',

'webkitRequestFullScreen'].forEach(function (req) {

fullscreenFunc = fullscreenFunc || fullscreenDiv[req];

});

}

 

function enterFullscreen() {

fullscreenFunc.call(fullscreenDiv);

}

 

fullscreenButton.addEventListener('click', enterFullscreen);

 

var exitFullscreen = function () {

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.webkitExitFullscreen) {

document.webkitExitFullscreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

} else {

console.log('Fullscreen API is not supported.');

}

};

 

var exitfullscreenButton = document.getElementById('exit-fullscreen-button');

 

exitfullscreenButton.addEventListener('click', function(e) {

e.preventDefault();

exitFullscreen();

});

 

 

</script>

 

</body>

</html>