Artigos sobre: PLAYER E VÍDEO
Este artigo também está disponível em:

(Player Antigo) Experiência Fullscreen

Este artigo fornece instruções que devem ser usadas no Antigo VTurb Player. Se você estiver usando o Novo Player clique aqui.


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.



  • Se pausar o vídeo, ele volta ao formato original.



Para habilitar esse opção no seu vídeo, você precisa usar a opção de embed no formato JS!



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: 14/05/2025

Este artigo foi útil?

Compartilhe seu feedback

Cancelar

Obrigado!