Grid banner

Code

<!-- javascript to play the video and hide the decription box. -->
<!-- javascript to set up the character limitation -->

< script > $(document).ready(function() {
  // these are variables that can be used to replace the title and description in the grid
  // to ensure that a maximum word count is not exceeded.
  // use javascript as per dynamic grid implementation on Calgary.ca
  var videolinkMain = "https://www.youtube.com/embed/PYzflRzOPhI";
  var videolinkSub = "https://www.youtube.com/embed/POFa3bNGaC4";
  var titleMain = "We are Calgary";
  var descMain ="Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
  var descSub = "New trains and three possible design options";
  var trimStrTitleMain = "";
  var trimStrDescMain = "";
  var trimStrDescSub = "";
  var maxLengthMainTitle = 25; // main video only
  var maxLengthMainDesc = 120; // main image
  var maxLengthSubDesc = 60; // sub image

  //trim string for main video title
  trimStrTitleMain = titleMain.substr(0, maxLengthMainTitle);
  //trim string for main desc
  trimStrDescMain = descMain.substr(0, maxLengthMainDesc);
  //trim string for main desc
  trimStrDescSub = descSub.substr(0, maxLengthSubDesc);
  // load the youtube playlist when overlay graphic is clicked for the main video

  $(document).delegate('#mainYoutube .youtubePlayOverlay', 'click',function() {
      $(this).hide();
      $(this).parent().css('position', 'relative');
      $(this).parent().css('z-index', 3000);
      $('#mainYoutube iframe:first').show().attr('src', '' +
        videolinkMain + '?autoplay=1');
    });

  // load the youtube playlist when overlay graphic is clicked for the second video
  $(document).delegate('#secondYoutube .youtubePlayOverlay', 'click',function() {
      $(this).hide();
      $(this).parent().css('position', 'relative');
      $(this).parent().css('z-index', 3000);
      $('#secondYoutube iframe:first').show().attr('src', '' +
        videolinkSub + '?autoplay=1');
    });

  $("#main-title").append(trimStrTitleMain);
  $("#main-desc").append(trimStrDescMain);
  $("#sub-desc").append(trimStrDescSub);

 }); // end document.ready

< /script>

<!-- html sample: Embend the video -->
<!-- embend the Video: add the 'video-container'class and thumbnail link -->
<div class="video-container b-grid-background coc-white-opacity" id="mainYoutube" >
 <button class="youtubePlayOverlay">
      <div class="video-thumbnail">
      <span class="cicon-caret-right"> role="button" </span>
        <img src="image.jpg" alt="select to play the video"  tabindex="0" />
      </div>
    </button>
  <iframe allowfullscreen="" frameborder="0" height="360" src="" style="display:none;" width="600"> </iframe>
  </div>

  <div class="cui b-grid-content coc-white-opacity">
    <h2  id="main-title" ></h2>
    <p id="main-desc"></p>
  </div>

<!-- html sample: Embend the image -->
<!-- Main background image: 'b-grid-main' class  -->
<!-- Side background image A: 'background-one' class  -->
<!-- Side background image B: 'background-two' class  -->
<div class="cui b-grid b-grid-second">
<div class="background-two b-grid-background">
  <div class="cui b-grid-content coc-white-opacity">
    <p>Find what The City offers to help you have a fun and safe summer! </p>
    <a href="#" target="_blank">Things to do </a>
  </div>
</div> 
</div>


<!-- html sample: Embend the video and  the image -->
<!--main section-video-->
<div class="row cui b-grid-section">
  <div class="col-md-8 no-pad">

    <div class="cui b-grid-main">
     <div class="video-container b-grid-background" id="mainYoutube" >
       <button class="youtubePlayOverlay">
            <div class="video-thumbnail">
              <span class="cicon-caret-right"> role="button" </span>
              <img class="" src="image.jpg" alt="select to play the video"  tabindex="0" >
            </div>
        </button>
        <iframe allowfullscreen="" frameborder="0" height="360" src="" style="display:none;" width="600"></iframe>

      </div>

        <div class="cui b-grid-content coc-white-opacity">
          <h2  id="main-title" ></h2>
          <p id="main-desc"></p>
        </div><!--b-grid-content-->

    </div><!--b-grid-main end-->

  </div><!--col-->

<!--side section - video -->
  <div class="col-md-4 no-pad">
    <div class="cui b-grid b-grid-first">
     <div class="video-container b-grid-background" id="secondYoutube">
       <button class="youtubePlayOverlay">
            <div class="video-thumbnail">
              <span class="cicon-caret-right"> role="button" </span>
              <img class="" src="image.jpg" alt="select to play the video"  tabindex="0"  />
            </div>
        </button>
        <iframe allowfullscreen="" frameborder="0" height="360" src="" style="display:none;" width="600"></iframe>

      </div>
      <div class="cui b-grid-content coc-white-opacity">
         <p id="sub-desc"></p>
      </div><!--b-grid-content-->

    </div><!--b-grid-->

<!--side section - Image -->
    <div class="cui b-grid b-grid-second">
     <div class="background-two b-grid-background">
      </div>

      <div class="cui b-grid-content coc-white-opacity">
        <p>Find what The City offers to help you have a fun and safe summer!</p>
         <a href="#" target="_blank">Things to do</a>
      </div>
    </div><!--b-grid-content-->

  </div><!--col-->
</div><!--row-->

Usage

Two visual versions

• Dark background with light text description: add the class name 'coc-black-opacity' to the content div
• Light background with dark text description: add the class name 'coc-white-opacity' to the content div

Character limitation

• Main section:
  • Title character limitation: 25 characters
  • Content character limitation: 120 characters. Mobile character limitation: 60 characters.
• Side section
  • Title character limitation on desktop and mobile: 60 characters.

Call to action button / link usage

When using the image, include only one call to action button or link on each section description area.

When using the video, do not include the call to action link or button on the description area.

Image / video : The aspect ratio is 16:9

Image size: 1920px × 1270px