Astuces CSS - Pour une vidéo responsive


CSS

/ videos /

.parent {width:95%; margin:50px auto;}
.parent h5 {padding:0; margin:0; font:normal 16px/24px verdana, arial, sans-serif; color:#666;}
/ set the 'wrap' with a percentage bottom margin so that this is responsive /
.wrap {position:relative; width:100%; height:0; margin-bottom:10%; overflow:hidden;} / use overflow:hidden to crop the left and right overlap of the resized video /
/ calculate the height of the 'wrap' depending on the aspect ratio required /
.ratio-16-9 {padding-top:calc(100%/(16/9));}
.ratio-3-2  {padding-top:calc(100%/(3/2));}
.ratio-4-3  {padding-top:calc(100%/(4/3));}
.ratio-16-9 iframe {width:100%; height:100%; position:absolute; top:0; left:0;} / as the original video has the aspect ratio 16:9 the width and height of the iframe is 100% /
/ the new width is the new height  the original aspect ratio */
/ the left position is the (wrap width - the new width) divided by 2 /
.ratio-3-2 iframe {width:calc((100%/(3/2))  (16/9)); height:100%; position:absolute; top:0; left:calc((100% - ((100%/(3/2))  (16/9))) / 2);}
.ratio-4-3 iframe {width:calc((100%/(4/3))  (16/9)); height:100%; position:absolute; top:0; left:calc((100% - ((100%/(4/3))  (16/9))) / 2);}
/ fin videos /
.embed-responsive {position: relative;display: block;height: 0;padding: 0;overflow: hidden;}
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object {  position: absolute;  top: 0;  left: 0;  bottom: 0;  height: 100%;  width: 100%;  border: 0;}
.embed-responsive.embed-responsive-kat {  padding-bottom: 100%;}
.embed-responsive.embed-responsive-16by9 {padding-bottom: 56.25%;}

.embed-responsive.embed-responsive-4by3 {padding-bottom: 75%;}

 

HTML

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9" align="center"><video class="embed-responsive-item" controls="controls" width="300" height="150">
        <source src="http://cdn1.wibbitz.com/page/videos/31844b24a44c428c98512d2ea57bdd35.mp4" type="video/mp4" />
    </video></div>

 


 

 


c'est moche quand le plugin flash est désactivé.Est-il possible d'intégrer des vidéos you tube en html5 ?

 


 


Index |Info | Imprimer | | PDF Permalien

Revue de presse RGPD