Modèle CSS responsive - vidéo

Ci-dessous le code à intégrer pour les vidéos importées, Youtube, Vimeo, Dailymotion...
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/-s_dZx02Luw"></iframe>
</div>
​


Quant vous hébergé votre vidéo sur votre site voici le code à placer
<div align="center" class="embed-responsive embed-responsive-16by9">
    <video controls="controls" poster="http://babelleir.be/images/linky.jpg" class="embed-responsive-item">
        <source src="http://guppymania.cluster1.easy-hebergement.net/videos/LINKY.mp4" type="video/mp4">
    </video>
</div>

 

Ci-dessous le code css à rajouter dans le fichier 'style.css' de votre skin.
.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,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
  padding-bottom: 75%;
}
Info | Imprimer | Permalien