Bonjour.

Voilà j'ai un petit souci d'affichage d'une vidéo Youtube sur le site sur lequel je travaille.

Sous FF, l'affichage est niquel, la vidéo apparaît comme il faut au clic d'un lien. Je la fais apparaître au centre de la page web,avec en dessous un voile grisé, qui recouvre tout la page web le temps de la lecture de la vidéo. Pour fermer la vidéo et revenir à la page web, on clique sur la partie grisée n'importe où, et hop ça disparait.

Le probème est que sous IE, la vidéo apparait bien, mais elle est complètement décentrée. Le voile lui pose
aussi des problèmes selon la version de IE, mais pas tout le temps: des fois il recouvre bien toute la page, des fois pas ( pourtant width et height sont à 100%), on a l'impression qu'il est décalé aussi.

J'utilise la taille de la fenêtre pour pouvoir la centrer, et en récupérant les valeurs et en les affichant avec un alert,
j'ai des valeurs cohérentes, que je sois sous IE ou FF.

Donc voilà, je ne sais pas d'où ça peut venir.


Je rajoute le code de ce passage là concernant la vidéo :

<script>

// Fonction qui affiche la vidéo ainsi que le voile grisé

var backdiv;

showYoutube = function( video_num, video_url, video_height, video_width )
{

        var myWidth = 0, myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
                //Non-IE
                myWidth = window.innerWidth;
                myHeight = window.innerHeight;
        }
        else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth;
                myHeight = document.documentElement.clientHeight;
        }
        else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                //IE 4 compatible
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight;
        }
        window.alert( myWidth + ' x ' + myHeight );

        bod = document.getElementsByTagName('body')[0];

        backdiv = document.createElement('div');
        youtubediv = document.createElement('div');

        video_top = (myHeight - video_height) /2;
        video_left = (myWidth - video_width) /2;

        alert('video_top = ' + video_top + ' and video_left = ' + video_left);

        Element.extend(backdiv);
        Element.extend(youtubediv);
        backdiv.addClassName('backgd');
        backdiv.hide();

        // insert it in the document
        bod.appendChild(backdiv);
        bod.appendChild(youtubediv);


        backdiv.setStyle({backgroundColor:'black','position':'absolute',top:'0',left:'0',width:'100%',height:'100%',opacity:0.4,'z-index':'5000'}).hide();
        youtube=$("youtube"+video_num);
        youtube='<object style="position:absolute;z-index:5001;text-align:center;top:'+video_top+'px;left:'+video_left+'px"; width='+video_width+' height='+video_height+'>                 <param name="movie" value='+video_url+'></param>                 <param name="wmode" value="transparent"></param>                 <embed src='+video_url+' type="application/x-shockwave-flash" wmode="transparent" width='+video_width+' height='+video_height+'></embed>
                </object>';
        youtubediv.innerHTML=youtube;
        backdiv.onclick = hideYoutube;

        backdiv.show();
        youtubediv.show();
}

// Fonction qui sert à fermer la vidéo lorsque l'on clique sur le voile grisé

hideYoutube = function()
{
        backdiv.remove();
        youtubediv.remove();
}

// Ici c'est l'emplacement de l'affichage qui est mis en place

<td>
<?
        foreach ( $videos as $num => $tab ) {  // pour un tableau avec plusieurs vidéos éventuellement 
        ?>
                <a style='position:absolute;color:#FF9933;text-decoration:none;' href=""    onclick="showYoutube('<?=$num?>','<?=$tab[0]?>','<?=$tab[1]?>','<?=$tab[2]?>'); return false;">
<img src='<?=$base_url?>img/<?=$lang?>/images2/2-societe/presse/presse_fl.png' width=34 height=15 style='margin:0 7px 5px 0;' align=absmiddle><?=$tab[3]?></a><br>

<?
     }
?>

</td>

</script>

Configuration: Linux
Firefox 1.5.0.12