Grid banner

Code

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

<script>
$(document).ready(function() {
  // 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";

  // 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');
  });

});// End of 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="../img/video-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="../img/video-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="../img/video-image-2.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

Aspect ratio: 16:9

Image size: 1920px × 1270px