Discussion :

[saxrub]

Salut à tous
Connaissez-vous une astuce afin que le viewer se redimensionne automatiquement en respectant un ratio de 16/9 fonction de la taille de "l'espace" qui lui est dévolu ou au redimensionnement de la fenêtre du navigateur ?
Pascal

[jrenard]

Bonjour,

Il va d'abord falloir créer une fonction qui adapte automatiquement les dimensions du viewerDiv en fonction des dimensions de la fenêtre et de sa résolution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function updateViewerDimensions() {
    var viewerStyle = document.getElementById('viewerDiv').style;
    // Dimensions de la fenêtre
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    // Test de résolution
    if (windowWidth/windowHeight<16/9) {
        viewerStyle.width = windowWidth.toString()+'px';
        viewerStyle.height = (Math.floor(windowWidth*9/16)).toString()+'px';   
    } else {
        viewerStyle.height = windowHeight.toString()+'px';
        viewerStyle.width = (Math.floor(windowHeight*16/9)).toString()+'px';   
    }
}

Cette fonction devra d'une part être appelée dès l'ouverture de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
window.onload = function() {
    updateViewerDimensions();
    ...
}

Et elle devra d'autre part être appelée à chaque redimensionnement de la fenêtre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
if (window.addEventListener) {
    // Evènement générique
    window.addEventListener('resize', updateViewerDimensions);
} else if (window.attachEvent) {
    // Pour anciennes versions d'IE
    document.body.onresize = updateViewerDimensions;
}

Et pour un effet encore meilleur, ne pas oublier de désactiver les marges du body dans le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body {
    margin: 0;
}

Ca, c'est dans le cas où le viewer occupe toute la place dans la fenêtre. S'il est enfermé dans un espace particulier, il suffit de remplacer window.innerWidth et window.innerHeight par les dimensions de l'espace en question.

[saxrub]

Nickel
Merci