Posición del widget

Es posible mover el widget de posición mediante código CSS o Javascript. Para ello deberás añadir el siguiente snippet:

CSS

Izquierda

.videsk-top-container {
    left: 3% !important;
    align-items: flex-start !important;
}

.videsk-button-iframe {
    left: 10px !important;
    right: unset !important;
    bottom: 10px;
}

Derecha

.videsk-top-container {
    right: 3% !important;
    align-items: flex-end !important;
}

.videsk-button-iframe {
    left: unset !important;
    right: 10px !important;
    bottom: 10px;
}

Javascript

Javascript (Izquierda)

<script>
const style = document.createElement('style');
style.innerHTML = `
.videsk-top-container {
    left: 3% !important;
    align-items: flex-start !important;
}

.videsk-button-iframe {
    position: absolute;
    left: 10px !important;
    right: unset !important;
    bottom: 10px;
}
`;
document.head.appendChild(style);
</script>

Javascript (Derecha)

<script>
const style = document.createElement('style');
style.innerHTML = `
.videsk-top-container {
    right: 3% !important;
    align-items: flex-end !important;
}
.videsk-button-iframe {
    position: absolute;
    left: unset !important;
    right: 10px !important;
    bottom: 10px;
}
`;
document.head.appendChild(style);
</script>

🚧 Estamos trabajando para que esta personalización la puedas realizar por el dashboard. 🚧

Posición en base a resolución

Para modificar la posición del widget basado en la resolución del dispositivo puede utilizar CSS media queries.

max-width y min-width representarán puntos de quiebre (breakpoints) en base a la resolución en pixeles.

La siguiente tabla porporciona breakpoints más comunes:

Resoluciones	Dispositivo
320px - 480px	Mobile devices
481px - 768px	iPads y tablets
769px - 1024px	Pantallas pequeñas (laptops, notebooks)
1025px - 1200px	Escritorios
1201px o más	Alta resolución

A continuación, te proporcionamos algunos ejemplos:

Izquierda móvil

@media screen and (max-width: 600px) {

    .videsk-top-container {
        left: 3% !important;
        align-items: flex-start !important;
    }
    
    .videsk-button-iframe {
        left: 10px !important;
        right: unset !important;
        bottom: 10px;
    }
    
}

Izquierda notebooks

@media screen and (min-width: 800px) {

    .videsk-top-container {
        left: 3% !important;
        align-items: flex-start !important;
    }
    
    .videsk-button-iframe {
        left: 10px !important;
        right: unset !important;
        bottom: 10px;
    }
    
}