Video module

Purpose

The video module will display a thumbnail of the video with a caption. When the user clicks on the video thumbnail, the video plays in a modal window.

Demo (Admissions area)

Markup

• The markup for the video module will require two parts of markup, one to display the thumbnail, and one to display the modal window.

• For the thumbnail

              <div class="frame">
                <div class="hover-caption-container">
                  <a href="http://www.youtube.com/embed/**YOUTUBE_ID**?autoplay=1" class="image-shadow video-modal-link" data-target="#videoModal" data-toggle="modal" data-title="**VIDEO_TITLE**">
                    <img src="**VIDEO_THUMBNAIL**" />
                  </a>
                  <i class="icon-play-circle"></i>
                  <div class="caption">
                    <p>**VIDEO_CAPTION**</p>
                  </div>
                </div>
              </div>
  

• For the modal THIS MARKUP SHOULD NEVER OCCUR MORE THAN ONCE ON A PAGE, all videos use the same modal window, with the ID #videoModal. This can be placed after the </footer> tag.

      <div id="videoModal" class="modal hide fade">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h3>Video Modal</h3>
        </div>
        <div class="modal-body">
          <div class="video-mod-container">
            <iframe type="text/html" src="" style="min-width: 300px; min-height: 100px;" frameborder="0"></iframe>
          </div>
        </div>
      </div> 
  

Styling

• Caption shows on hover, play icon is overlaying video

Functionality / Javascript

• Video will play in a modal window when the user clicks on the thumbnail. If the user is on a low res device they should be directed to youtube to watch the video full screen.

     (function($) {
        $(document).ready(function() {
          $(document).on("click", ".video-modal-link", function () {
            var videoSrc = $(this).attr('href');
            // no modal for mobile
            if($(window).width() < 500) {
              window.location = videoSrc;
            }
            $('#videoModal iframe').attr('src', videoSrc);
            $('#videoModal .modal-header h3').text($(this).data('title'));
          });
  
          $('#videoModal').bind('hidden', function () {
            $('#videoModal iframe').attr('src', '');
          });
        });
      })(jQuery);
  

(View the Why UAlberta page for an example)

Sans Modal Video

• The desired behavior for videos is to have them display in modal window. If a video is embeded directly in the content of the page, it should have the following markup:

      <div class="video-mod-container">
        <iframe type="text/html" src="http://www.youtube.com/embed/**VIDEO_ID**?autoplay=1" frameborder="0"></iframe>
      </div>