Discussion :

[carjo]

Bonjour,

J'utilise XHTML 1.0 Transitional.

J'ai intégré sur une page html le code proposé par youtube pour une vidéo et lorsque la page qui contient ce type de code, elle "flashe" en blanc avant que l'on puisse visualiser l'écran.

Code html :

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

<iframe width="420" height="315" src="//www.youtube.com/embed/exemplexyzxyz" frameborder="0" allowfullscreen></iframe>

(aussi, allowfullscreen ne fonctionne pas)

Ça ne fonctionne pas mieux avec la balise Object.

Y aurait-t-il un moyen d'éviter ces "flashes " ?

Merci

[carjo]

J'avais omis de mentionner que ceci se produit sous Chrome et Safari. Avec IE et FF, ça ne flashe pas.

[Bovino]

Ce serait pas un problème de FOUC ?

[carjo]

FOUC?

[Bovino]

Oui FOUC : Flash Of Unstyled Components !
Indiquer le nom était supposé t'inciter à rechercher sur ce nom !

[carjo]

Effectivement ça ressemble à ça. De plus j'ai un petit script js dans cette page. Ça dépend des navigateurs ?

Aussi je suis tombé sur cet article et j'aimerais savoir ce que vous en pensez. Je l'ai testé mais il n'a aucun effet sur ma page:

http://css-tricks.com/prevent-white-flash-iframe/

Merci

[Invité]

J'ai eu un problème similaire lors de la fabrication d'une visionneuse basée sur Scene7 (du flash aussi) et un slider interne qui permettait de changer l'image centrale. A chaque changement d'image, le temps que Scene7 fabrique l'image et l'envoi, il y avait un flash blanc. J'ai pu résoudre le problème en fixant une min-height au <div> contenant la balise <object>. min-height qui avait la même valeur que celle de la balise <object>

[carjo]

Merci chanyslas.

Je l'ai testé, mais ça ne règle pas le problème...

[Invité]

Qu'avez-vous testé ?
Est-ce bien quelque chose comme :

Code html :

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

1
2
3
<div style="min-height: 315px">
   <object type="application/x-shockwave-flash" height="315" style="display: block" .../>
</div>

[carjo]

Oui. Sauf que lorsque j'inclus

Code :

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

type="application/x-shockwave-flash"

je ne vois qu'un rectangle blanc. J'ai dû l'enlever pour le test.

[Invité]

Alors je n'ai plus aucune idée.
Sinon, essayez avec swfobject.

[carjo]

Deux choses:

1- J'ai désactivé le petit script js et ça n'a rien changé. Ça ne semble pas la source du problème

2- J'ai testé à partir de cette suggestion:

http://www.techrepublic.com/blog/web...ur-websites/#.

Ça n'a rien amélioré. Le problème semble venir de Chrome et Safari en particulier, qu'en pensez-vous ?

merci

[Invité]

Votre problème n'est probablement pas un problème javascript, mais plutôt un problème de style (FOUC). Vous avez un composant contenant la vidéo, qui n'est pas "stylisé" et lorsque la vidéo est en cours de chargement, le composant, qui ne contient rien, et qui est non stylisé est réduit à sa dimension minimale, puis quelques instants après, lorsque le contenu est arrivé, le composant contenant reprend une dimension capable d'accueillir la vidéo. D'où le "flash". Vous devez trouver le composant contenant la vidéo qui n'a pas de dimensions et lui en fixer une pour éviter qu'il soit redimensionné lorsque la vidéo n'est pas encore chargée. Servez-vous éventuellement de la fonction "Page Inspector 3D View" de Firefox pour identifier les composants contenant.
Le mieux, partez d'une page blanche et de l'exemple que vous avez suivi au départ. De préférence, un exemple fourni par youtube, puisque vous semblez vouloir intégrer une vidéo youtube. Puis ensuite, ajouter vos propres composants et styles, en vérifiant à quel moment le flash apparait. Je vois mal youtube, qui appartient à google, fournir un exemple d'intégration de vidéo qui ne fonctionne pas sur chrome, qui appartient aussi à google.

[carjo]

Merci pour votre suggestion.

J'avais déjà fait le test inverse, i.e. j'ai enlevé le iFrame et du coup, il n'y avait plus aucun "flashe". Donc le problème provient vraiment de cette balise.