College of Business Style Guide

Video 

<div class="video-wrapper">
    <div class="video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/GeZZr_p6vB8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="transcript">
        <div class="accordion-item">
            <h2 class="accordion-button">
                <button aria-expanded="false">
                    <span>
                        Transcript
                    </span>
                </button>
            </h2>

            <div class="accordion-text" hidden>
                <p>An old man turned ninety-eight<br /> He won the lottery and died the next day.<br /> It's a black fly in your Chardonnay<br /> It's a death row pardon two minutes too late.<br /> - Alanis Morissette</p>
            </div>
        </div>
    </div>
</div>
 
<div class="video-wrapper">
    <div class="video">
        {{ video }}
    </div>
    <div class="transcript">
      {% block cms_override %}
        {% include "@accordion_item" %}
      {% endblock cms_override %}
    </div>
</div>
 
{
  "video": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/GeZZr_p6vB8\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
  "accordion_heading": "Transcript",
  "accordion_content": "An old man turned ninety-eight<br /> He won the lottery and died the next day.<br /> It's a black fly in your Chardonnay<br /> It's a death row pardon two minutes too late.<br /> - Alanis Morissette"
}
  • Content: 
    /* Responsive Video using CSS only */
.video {
    height: 0;
    overflow: hidden;
    padding-top: 35px;
    padding-bottom: 56.25%; /* 56.25 % = 16x9 */
    position: relative;

    &--full {
        padding-bottom: 75%; /* 75% = 4x3 */
    }

    iframe {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

 }
  • URL: /components/raw/video/video.scss
  • Filesystem Path: components/02-pieces/02-video/video.scss
  • Size: 375 Bytes

No notes defined.