Experiência Fullscreen
Experiência Fullscreen
Nesse artigo, vamos disponilizar para você um código que vai permitir a Experiência Fullscreen em seus vídeos!
O benefício de usá-la é criar uma experiência mais imersiva ao visitante - o que tende a aumentar a conversão.
Quando você usa a Experiência Fullscreen, o vídeo, ao ser iniciado, irá se expandir como se estivesse em tela cheia!
A diferença é que o visitante vai continuar com a opção de rolar a página para baixo e ver outras informações que possam estar ali (como o Botão de Ação)... sem ficar preso no vídeo!
Caso queira que a página role pra baixo, sozinha, para que o Botão de Ação fique em destaque para o visitante, você pode ativar o Scroll até o Botão.
![](https://storage.crisp.chat/users/helpdesk/website/390a843820d6ba00/captura-de-tela-2023-12-09-as-_peujsy.png)
Se pausar o vídeo, ele volta ao formato original.
![](https://storage.crisp.chat/users/helpdesk/website/390a843820d6ba00/captura-de-tela-2023-12-09-as-_zz8iww.png)
Para habilitar esse opção no seu vídeo, você precisa usar a opção de embed no formato JS!
![](https://storage.crisp.chat/users/helpdesk/website/390a843820d6ba00/captura-de-tela-2023-12-09-as-_bo90xh.png)
E agora é só colocar o script abaixo no HTML da sua página, abaixo do embed do vídeo:
<script>
function moveCTA(container) {
const cta = container.querySelector(".smartplay + .smartplayer-call-action");
if (!cta) return;
container.parentNode.insertBefore(cta, container.nextSibling);
}
function insertBeforePlayer(instance, prefix) {
if(!instance) return;
const player = instance.mobileContainer || instance.container;
const container = document.createElement("div");
container.id = `${prefix}-${instance.options.id}`
container.classList.add(prefix);
player.parentNode.insertBefore(container, player);
container.appendChild(player);
return container;
}
function mountContainers() {
const instances = window.smartplayer.instances;
instances.forEach(instance => {
const container = insertBeforePlayer(instance, `player-fake-fs`)
if(!container) return;
moveCTA(container)
let firstClick = instance.resume?.inResume === undefined;
});
instances.forEach(instance => insertBeforePlayer(instance, `player-auto-height`));
}
function mountStyles() {
const styles = document.createElement("style");
styles.innerHTML = `
.player-fake-fs[data-fullscreen='true'] {
display: flex !important;
align-items: center !important;
background-color: #000 !important;
height: 100vh !important;
width: 100vw !important;
cursor: pointer;
}
.player-fake-fs[data-fullscreen='true'] .player-auto-height .smartplayer-mobile-container {
max-width: 100% !important;
}
.player-fake-fs[data-fullscreen='false'] .player-auto-height {
width: 100% !important;
}
.player-fake-fs[data-fullscreen='false'] {
margin-left: 0 !important;
}
.player-auto-height {
margin: 0 auto;
width: 100%;
}
`;
document.head.appendChild(styles);
}
function adjustXPositionFs() {
const currentFs = document.querySelectorAll(".player-fake-fs[data-fullscreen='true']");
currentFs.forEach(container => {
container.style.marginLeft = "0";
const position = container.getBoundingClientRect()
if(position.left <= 0) return;
container.style.marginLeft = `-${position.left}px`;
});
}
function changeWidthByHeight() {
const containers = document.querySelectorAll(".player-auto-height");
containers.forEach(container => {
const video = container.querySelector("video");
if (!video) return;
const aspectRatio = video.clientWidth / video.clientHeight;
const windowHeight = window.innerHeight;
const newWidth = windowHeight * aspectRatio;
const width = (newWidth / window.innerWidth) * 100;
container.style.width = `${width >= 100 ? 100 : width}%`;
});
}
function scrollToFS(container) {
const position = container.getBoundingClientRect();
window.scrollTo({
top: position.top + window.scrollY,
left: position.left + window.scrollX,
});
}
function toggleFs(id, inFullscreen = false) {
const container = document.getElementById(`player-fake-fs-${id}`);
if (smartplayer.instances[0].smartAutoPlay || !container) return;
container.dataset.fullscreen = inFullscreen.toString()
var el = document.querySelector(".player-fake-fs");
var elDistanceToTop = window.pageYOffset + el.getBoundingClientRect().top
var html = document.querySelector("html");
if(!inFullscreen){
html.style.marginTop = `${elDistanceToTop}px`;
}
if (inFullscreen) {
html.style.marginTop = `-${elDistanceToTop}px`;
console.log(el);
window.addEventListener("resize", changeWidthByHeight);
changeWidthByHeight();
adjustXPositionFs();
return scrollToFS(container);
}
window.removeEventListener("resize", changeWidthByHeight);
}
function mountFakeFsEvents() {
const instances = window.smartplayer.instances;
window.addEventListener("resize", adjustXPositionFs);
instances.forEach(instance => {
instance.on("play", () => toggleFs(instance.options.id, true));
instance.on("pause", () => toggleFs(instance.options.id, false));
});
}
function customEvents() {
mountContainers();
mountStyles();
mountFakeFsEvents()
}
function checkPlayerLoaded() {
if (window.smartplayer && window.smartplayer.instances) return customEvents()
return setTimeout(checkPlayerLoaded, 100)
}
window.addEventListener("load", () => checkPlayerLoaded())
</script>
Prontinho, seu vídeo já estará com a Experiência Fullscreen ativada!
Atualizado em: 22/08/2024
Obrigado!