Bonjour,
voilà, pour un projet je dois centrer une vidéo sachant que sa taille est en %age.
Et je n'arrive pas (j'essaie depuis 2semaines) à arriver à la centrer sans que cela enlève le width % de la video.
J'ai essayer à faire celà en css, mais impossible. Ensuite j'ai voulu mettre la margin en JS(qui calcule la taille de la width et calcule ainsi les margin right et left, seulement je n'arrive pas à réinitialiser la variable qui contient la taille du window.client
Voici mon code html :
ici mon code css
et le code js
voilà comme vous voyez je suis confronté à plusieurs soucis.
Tout d'abord je dois centrer la vidéo et la rendre extensible selon la résolution.
Ensuite, je dois bien faire gaffe à que le caption (class caption) soit bien imbriquer durant le resize sur la vidéo.
Et par la suite (si déjà j'aurai réussit tout ça, j'ai à faire un slide par vidéo)..
Je vous remercierai MILLE MILLE FOIS si vous pouviez m'aider...
Merci d'avance et de votre temps.
Modifié par slashsword (01 Apr 2012 - 00:19)
voilà, pour un projet je dois centrer une vidéo sachant que sa taille est en %age.
Et je n'arrive pas (j'essaie depuis 2semaines) à arriver à la centrer sans que cela enlève le width % de la video.
J'ai essayer à faire celà en css, mais impossible. Ensuite j'ai voulu mettre la margin en JS(qui calcule la taille de la width et calcule ainsi les margin right et left, seulement je n'arrive pas à réinitialiser la variable qui contient la taille du window.client
Voici mon code html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>super</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/video2.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header">
</div>
<div id="wrapper">
<video controls preload="metadata" aria-describedby="full-descript" poster="img/video/afgenfant.jpg">
<source src="video/poker_player.mp4" type="video/mp4" />
<source src="video/poker_player.webm" type="video/webm" />
<source src="video/poker_player.ogv" type="video/ogg" />
</video>
<div class="caption" >
<p class="datevideo" id="resize">25 nov. 2001</p>
<p class="titlevideo" id="title">Lorem ipsum dolor amet, consectetu adipiscing elit. </p>
<p class="titlesub">Praesent metus neque, plarat Lorem ipsum dolor sit tile gnics amet, consectetur </p>
<a href="#" title="" class="play" ><img src="img/video/play.png" alt=""></a>
</div>
<div class="descript">
<p>« Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dolor mauris,euismod condimentum interdum at, lobortisimunpa rhoncus arcu. Cras nisl nulla, laoreet eu imperdiet at, lacinia at tincidunt aliquet augue. Proin cursus ultricies erat, idsollicitudinud augue elementum vitae. Maecenas est erat, interdum vitae aliquet ut, fringilla quis mauris... »<a href="#" title="description étape 1">Lire la suite</a></p>
</div>
</div>
<script type="text/javascript" src="js/video/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jstest.js"></script>
</body>
</html>
ici mon code css
@charset "utf-8";
body {
background:#000;
}
#wrapper {
width: 100%;
max-width: 1000px;
min-width: 600px;
}
#header {
height:101px;
}
.descript p{
color:#fff;
font-size:12px;
text-align:left;
line-height:1.2;
font-family:georgia;
}
.descript a {
float:right;
background:url(../img/video/bouton.png) no-repeat;
color:white;
text-align: center;
margin-top:3px;
margin-bottom:9px;
width:80px;
height:27px;
line-height:27px;
}
video {
width:55%;
height:53%;
min-width:517px;
min-height:300px;
}
.caption {
text-align:right;
font-family:DIN-Bold;
width:20%;
min-width:192px;
top:16%;
left:58%;
min-height:1.2em;
background:url(../img/video/maquevideo.png);
position:absolute;
}
.caption p {
margin-right:20px;
color:#fff;
}
.datevideo{
color:#f31e2b;
font-size:35px;
margin-top:15%;
width:100%;
display:inline-block;
}
.titlevideo {
margin-top:12%;
font-size:34px;
font-family:DINPro-Black;
width:100%;
}
.titlesub {
margin-top:5%;
font-size:14px;
}
.play img {
margin-top:7%;
margin-right:40%;
}
/*media queries*/
@media screen and (max-width: 927px) {
.caption {
left:325px;
}
}
}
et le code js
jQuery(document).ready(function() {
//caption height
var vidh=$("video").height();
capth=$(".caption");
capth.css("height",vidh);
//play button
$('a.play').click(function(play){
$(".caption").hide() ;
});
//content width
function contentWidth(){
windowWidth=document.documentElement.clientWidth;
var div = $("video"),
timeline = $("#timeline"),
divWidth = div.width(),
timelineWidth = timeline.width()
marge = Math.round((windowWidth - divWidth) / 2);
margeTimeline = Math.round((windowWidth - timelineWidth) / 2);
div.css('marginLeft', marge);
div.css('marginRight', marge);
}
function size ()
{
if (contentWidth==0) {contentWidth();}
else
{
this.windowWidth=0;
contentWidth();
}
}
window.onResize=size();
});
voilà comme vous voyez je suis confronté à plusieurs soucis.
Tout d'abord je dois centrer la vidéo et la rendre extensible selon la résolution.
Ensuite, je dois bien faire gaffe à que le caption (class caption) soit bien imbriquer durant le resize sur la vidéo.
Et par la suite (si déjà j'aurai réussit tout ça, j'ai à faire un slide par vidéo)..
Je vous remercierai MILLE MILLE FOIS si vous pouviez m'aider...
Merci d'avance et de votre temps.
Modifié par slashsword (01 Apr 2012 - 00:19)
