28172 sujets

CSS et mise en forme, CSS3

Taille iframe video ie9

Bonjour
je vous expose mon petit soucis.
J'ai un iframe dans le lequel j’insère une l'url d'une vidéo.
La taille de celle-ci s'affiche correctement partout sauf sur ie9.

Sur ie9 la taille est toute petite, le format de la vidéo est de 640 : 480 mais sur ie9 elle devient un carré de 200 :170 , si quelqu'un pourrait me donner une piste pour régler ce bug merci.

Merci d'avance.
Bon début d'année Smiley smile
oui bien sur

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<body>
<iframe width="640" height="480" frameborder="0" scrolling="no" src="http://api.dmcloud.net/player/embed/4d7e0c4ff325e16fc5002069/52b958c594a6f659ba6c92c5?auth=1703238714-0-dvpl98mu-b880620503c45804e52a6aadad58deb9&autoplay=1"></iframe>
</body>
</html>
ohweb a écrit :
Bonjour,

Peux-tu nous poster ton code, ce sera plus facile pour t'aider.


oui bien sur

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<body>
<iframe width="640" height="480" frameborder="0" scrolling="no" src="http://api.dmcloud.net/player/embed/4d7e0c4ff325e16fc5002069/52b958c594a6f659ba6c92c5?auth=1703238714-0-dvpl98mu-b880620503c45804e52a6aadad58deb9&autoplay=1"></iframe>
</body>
</html>
Bonjour,
Plein de choses a contrôler car tu met en jeux des éléments variables dans leur réaction en fonction de ton environnement.
L'un des plus important est ton DOCTYPE, est'il

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ou plus rigide et PRO !

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="fr-FR" prefix="og:  http://ogp.me/ns#"  /> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7 modern-ie" lang="fr-FR" prefix="og:  http://ogp.me/ns#"  /> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8 modern-ie" lang="fr-FR" prefix="og:  http://ogp.me/ns#"  /> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie9" lang="fr-FR" prefix="og:  http://ogp.me/ns#"  /> <![endif]-->
<!--[if !(IE)]><!-->
<html class="no-js" lang="fr-FR" prefix="og:  http://ogp.me/ns#"  /><!--<![endif]-->
<script type="text/javascript">
//<![CDATA[
(function(){
var c = document.documentElement.className;
c = c.replace(/no-js/, 'js');
document.documentElement.className = c;
})();
//]]>
</script>

<!-- forcer IE malgres les reglages a adopter le mode optimal -->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
<!-- FIN forcer IE malgres les reglages a adopter le mode optimal -->

Ou as-tu basculé dans le merveilleux monde HTML5 pouvant utiliser la balise VIDEO !

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="iso-8859-1" />


Dans le deuxième cas une vidéo se placerait ainsi

<style>
.videocontainer{
   width: 100%;
   height: 0;
   padding-bottom: 75%;
   overflow: hidden;
   position: relative;
   max-width :720px;
 }
.videocontainer.r1{
   padding-bottom: 100%;
 }
.videocontainer iframe, .videocontainer embed, .videocontainer object{
  width: 100%!important; height: 100%!important;max-width :720px;
  position: absolute;
  top: 0; left: 0;
 }
</style>
<div class="videocontainer">
<iframe width="100%" height="0" src="//www.youtube.com/embed/jH-9Zr9yyQU?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
</div>

Voila quelques pistes !
Sujet clos
Aller à