# 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.

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

        <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>