Bonjour,
Le fond d'écran par défaut du mode fullscreen est noir. Il est possible de le modifier mais le résultat ne sera peut-être pas celui attendu.
Sache cependant qu'il faut rester logique entre l'utilisation du HTML et du HTML5. Donc à ne pas sortir de son contexte, dans notre exemple ici, qui date tout de même 2012, tu peux :
- conserver ou déplacer ton test du bgcolor. En tout cas, il te faut effectivement une notion de couleur de fond quelque part. Cela peut se faire dans le fichier css fournit :
body{
font-family: 'Lato', serif;
color:#554;
font-size:1.6em;
background: #B59
}
- ajouter ceci en début de fichier css afin que le body prenne bien tout l'écran en mode fullscreen (ce qui n'est pas le cas par défaut) :
html, body{
height:100%
}
- ajouter un id à ton body ;
- utiliser cet id au lieu de l'id du container comme paramètre des méthodes screenfull.request, screenfull.toggle, etc. qui sont appelées dans la balise script du HTML. Par exemple :
$('#request').click(function() {
screenfull.request( $('#idBody') );
});
Ce qu'il faut comprendre avec le fullscreen, c'est qu'on peut déterminer quel élément de la page va être en fullscreen. Dans la démonstration de l'article, l'élément choisit est le container. C'est pourquoi tu ne vois pas ce qui est en dehors du container, à savoir le fond du body.
Je n'ai testé qu'avec Chrome. Je ne certifie pas que cette solution soit compatible avec tous les navigateurs mais c'est déjà une piste et une petite explication.
0 |
0 |
L'API JavaScript Full Screen
