<div class="video-wrapper">
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/OH01Tj5BF1A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="transcript">
<div class="accordion" id="accordiontranscript">
<div class="card accordion_item">
<div class="card-header" id="headingone">
<h3 class="mb-0">
<button class="btn btn-link btn-block text-left accordion-btn" type="button" data-toggle="collapse" data-target="#collapseone" aria-expanded="true" aria-controls="collapseone">
<span class="accordion-button-text">
Transcript of the video goes here.
</span>
<i class="fas fa-chevron-down"></i>
<span class="sr-only">Show the content</span>
</button>
</h3>
</div>
<div id="collapseone" class="collapse show" aria-labelledby="headingone" data-parent="#accordiontranscript">
<div class="card-body">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris lorem, ultricies sed porttitor luctus, efficitur nec sem. Pellentesque rutrum iaculis venenatis. Cras congue diam quis sem facilisis, sed lacinia nulla elementum. In risus lectus, ullamcorper condimentum mattis vitae, maximus ut mi. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.</p>
<p>Nulla suscipit ex ipsum, id ultricies metus elementum faucibus. Ut vel quam quis velit viverra consectetur. Praesent ultrices arcu sed nisl imperdiet ornare. Nulla varius dui vitae libero blandit ultricies. Integer tempor orci a rhoncus tincidunt. Sed nisl elit, imperdiet fringilla lorem et, viverra sodales dolor. Vestibulum laoreet cursus leo, ut suscipit eros aliquet ac. Ut facilisis risus nec leo sagittis sagittis. Morbi viverra aliquet cursus. Aenean arcu elit, malesuada quis tincidunt ut, vehicula eget nunc. Pellentesque non finibus felis. Aenean id tincidunt nunc. Maecenas et venenatis ligula. Phasellus vel tortor laoreet, euismod ligula at, molestie orci. Phasellus faucibus vestibulum consectetur.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="video-wrapper">
<div class="video">
{% block video_override %}
<iframe width="560" height="315" src="{{ video }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
{% endblock video_override %}
</div>
{% if show_transcript %}
<div class="transcript">
<div class="accordion" id="accordion{{ accordion_name }}">
{% block accordion_override %}
{% for accordion_item in accordion_items %}
{% include "@accordion_item" with accordion_item %}
{% endfor %}
{% endblock accordion_override %}
</div>
</div>
{% endif %}
</div>
{
"video": "https://www.youtube.com/embed/OH01Tj5BF1A",
"show_transcript": true,
"accordion_name": "transcript",
"accordion_items": {
"1": {
"accordion_heading": "Transcript of the video goes here.",
"accordion_content": "<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris lorem, ultricies sed porttitor luctus, efficitur nec sem. Pellentesque rutrum iaculis venenatis. Cras congue diam quis sem facilisis, sed lacinia nulla elementum. In risus lectus, ullamcorper condimentum mattis vitae, maximus ut mi. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.</p><p>Nulla suscipit ex ipsum, id ultricies metus elementum faucibus. Ut vel quam quis velit viverra consectetur. Praesent ultrices arcu sed nisl imperdiet ornare. Nulla varius dui vitae libero blandit ultricies. Integer tempor orci a rhoncus tincidunt. Sed nisl elit, imperdiet fringilla lorem et, viverra sodales dolor. Vestibulum laoreet cursus leo, ut suscipit eros aliquet ac. Ut facilisis risus nec leo sagittis sagittis. Morbi viverra aliquet cursus. Aenean arcu elit, malesuada quis tincidunt ut, vehicula eget nunc. Pellentesque non finibus felis. Aenean id tincidunt nunc. Maecenas et venenatis ligula. Phasellus vel tortor laoreet, euismod ligula at, molestie orci. Phasellus faucibus vestibulum consectetur.</p>",
"accordion_id": "one",
"accordion_active": true
}
}
}
.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%;
}
&-wrapper {
.transcript {
margin: $spacer 0 0 0;
}
}
}
Display video component with the optional transcript.