73 lines
3.6 KiB
HTML
73 lines
3.6 KiB
HTML
<div class="cc--component-container cc--tabbed-media-content" style="background-color: var(--color-gray-100);">
|
|
<div class="c--component c--tabbed-media-content">
|
|
<div class="tabbed-media-content-text-col">
|
|
<div data-component-id="umass_base:section-title" class="f--section-title">
|
|
<h2 style="color: var(--color-old-brick);">LiveStream</h2>
|
|
</div>
|
|
<div data-component-id="umass_base:tabbed-container" data-once="tabbed-container">
|
|
<div class="tab-labels-container" role="tablist">
|
|
<div class="tab-labels-inner">
|
|
{{#each livestream_posts}}
|
|
<a href="#tabbed-content-{{index}}" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-{{index}}">{{title}}</a>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
{{#each livestream_posts}}
|
|
<div class="tab-content-panel" id="tabbed-content-{{index}}" role="tabpanel" aria-live="polite">
|
|
<div class="f--field f--cta-title">
|
|
<h2 style="color: var(--color-black);"> {{excerpt}} </h2>
|
|
</div>
|
|
<div data-component-id="umass_base:description" class="f--description">
|
|
<div style="color:var(--color-black);">{{content}}</div>
|
|
</div>
|
|
<div class="cta-container">
|
|
<div class="f--field f--button">
|
|
<a href="{{slug}}" class="button-primary button-context-light " aria-label="Tìm Hiểu Thêm" data-component-id="umass_base:button">
|
|
<span class="button-text"> Tìm Hiểu Thêm </span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabbed-media-content-media-col">
|
|
{{#each livestream_posts}}
|
|
<div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-{{index}}">
|
|
<div class="f--field f--image">
|
|
<img src="{{featuredImageUrl}}" data-src="{{featuredImageUrl}}" class="lazyload" alt="{{title}}">
|
|
</div>
|
|
<div class="f--field f--button">
|
|
<a href="#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
|
|
<span class="button-icon button-icon-play">
|
|
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
|
|
</svg>
|
|
</span>
|
|
<span class="button-text visually-hidden"> Play </span>
|
|
</a>
|
|
</div>
|
|
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
|
|
<iframe title="Video Content" width="900" height="1600" src="{{metaDescription}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Set the first tab and panel as active if they exist
|
|
var tabs = document.querySelectorAll('.tabbed-media-content-media-item[data-tab-id="tabbed-content-0"]');
|
|
if(tabs.length > 0) tabs[0].classList.add('is-active');
|
|
|
|
var panels = document.querySelectorAll('#tabbed-content-0.tab-content-panel');
|
|
if(panels.length > 0) panels[0].classList.add('is-active');
|
|
|
|
var labels = document.querySelectorAll('a.tab-label[aria-controls="tabbed-content-0"]');
|
|
if(labels.length > 0) labels[0].setAttribute('aria-selected', 'true');
|
|
});
|
|
</script>
|