Gabarit d'application IRSST

Version 2019

Le système de grille de Bootstrap

Le système de grille de Bootstrap permet jusqu'à 12 colonnes à travers la page. 

    <video id='my-video' class='video-js' controls preload='auto' width='640' height='264'
  poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>
    <source src='MY_VIDEO.mp4' type='video/mp4'>
    <source src='MY_VIDEO.webm' type='video/webm'>
    <p class='vjs-no-js'>
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
    </p>
  </video>

pour rendre la vidéo adaptative à la largeur de l'écran (ou de la colonne Bootstrap), il faut envelopper la balise vidéo avec un div avec les classes .embed-responsive et embed-responsive-16by9, puis ajouter la classe .embed-responsive-item à la balise video. 

  <div class="embed-responsive embed-responsive-16by9">
  <video id='my-video' class='video-js vjs-big-play-centered embed-responsive-item' controls preload='auto'
  poster='https://d2zihajmogu5jn.cloudfront.net/elephantsdream/poster.png' data-setup='{}'>
    <source src='https://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4' type='video/mp4'>
    <p class='vjs-no-js'>
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
    </p>
  </video>
</div>