Bonjour,
SUR CE SITE :
http://www.dannaprod.com/index.php?static1/videos
sur PC l'affichage des videos est correct.
Par contre sur IPHONE, les videos sont affichées en liste.
Je ne comprends pas pourquoi cet affichage est différent.
Pourriez vous l'aider s'il vous plais ?
je vous remercie
.fleft p { font-size: 1.2em; }
.fleft ul li { display: inline;
}
.fleft { float: left; margin: 0 20px 30px 0;
}
.cboth { clear: both; }
#main {
margin: 0 auto;
padding: 30px;
width: 952px;
}
.fleft ul li img{
border:7px solid #808AA3;
-webkit-transition: all 0.4s ease-in-out;
-webkit-transition-duration: 0.4s;
-moz-transition: all 0.4s ease-in-out;
-moz-transition-duration: 0.4s;
-o-transition: all 0.4s ease-in-out;
-o-transition-duration: 0.4s;
-ms-transition: all 0.4s ease-in-out;
-ms-transition-duration: 0.4s;
-khtml-transition: all 0.4s ease-in-out;
-khtml-transition-duration: 0.4s;
}
.fleft ul li img:hover , .fleft .active img {
border:7px solid #333333;}
<div id="main">
<div class="fleft">
<h4>REPORTAGES</h4>
<ul class="gallery clearfix">
<li><a href="http://vimeo.com/8851520#at=0" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/001.png" alt="" /></a></li>
<li><a href="http://youtu.be/HTqYfV9qmXA" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/002.png" alt="" /></a></li>
<li><a href="http://youtu.be/cH1KNPQE4gU" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/003.png" alt="" /></a></li>
</ul>
</div>
<div class="fleft">
<h4>COURTS METRAGES</h4>
<ul class="gallery clearfix">
<li><a href="http://youtu.be/koXS3nFYLns" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/004.png" alt="" /></a></li>
<li><a href="http://vimeo.com/10353921#at=0" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/005.png" alt="" /></a></li>
</ul>
</div>
<div class="fleft">
<h4>MASHUPS</h4>
<ul class="gallery clearfix">
<li><a href="http://youtu.be/Um3lRcZd0iI" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/006.png" alt="" /></a></li>
<li><a href="http://youtu.be/TqV9APlpn0Q" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/007.png" alt="" /></a></li>
<li><a href="http://youtu.be/yv1cHRBRoPo" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/008.png" alt="" /></a></li>
</ul>
</div>
<div class="fleft">
<h4>PARTENAIRES</h4>
<ul class="gallery clearfix">
<li><a href="http://youtu.be/SgMQm4X9ZhQ" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/006.png" alt="" /></a></li>
<li><a href="http://youtu.be/dr_u3OAfyOg" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/007.png" alt="" /></a></li>
</ul>
</div>
<div class="fleft">
<h4>PUBLICITÉS</h4>
<ul class="gallery clearfix">
<li><a href="http://youtu.be/JqLeINjbg0c" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/006.png" alt="" /></a></li>
<li><a href="http://youtu.be/JqLeINjbg0c" rel="prettyPhoto" title="YouTube demo"><img src="http://dannaprod.com/themes/defaut/diapo/images/thumbnails/007.png" alt="" /></a></li>
</ul>
</div>
<br class="cboth" />
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal', });
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast', hideflash: true});
$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
changepicturecallback: function(){ initialize(); }
});
$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
changepicturecallback: function(){ _bsap.exec(); }
});
});
</script>
</div>