Webinar Embed Template

Preview

HTML Code

<style>
.leaderboard-code-snippet {
height: auto !important;
}

.aspect-ratio {
position: relative;
height: 0;
padding-bottom: 56.25%;
}

.aspect-ratio > iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}

.sc-live-stream__sc-logo {
display: none;
}

.sc-live-stream__sc-logo--svg {
width: 180px;
height: auto;
}

@media (min-width: 1000px) {
.sc-live-stream__sc-logo {
display: flex;
}

.sc-live-stream__sc-logo--svg {
width: 304px;
height: auto;
}
}

/* Video stream */
.sc-live-stream::before,
.sc-live-stream::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-color: #0c3b60;
z-index: -1;
}

.sc-live-stream::before {
right: 100%;
left: -500%;
}

.sc-live-stream::after {
left: 100%;
width: 500%;
}

.sc-live-stream__chat-wrap {
min-width: 400px;
min-height: 800px;
}

.sc-live-stream__chat-wrap iframe {
height: 800px;
}

@media (min-width: 1000px) {
.sc-live-stream__inner {
flex-direction: row;
}
.sc-live-stream__sc-logo--svg {
width: 304px;
height: auto;
}
}

.viewport {
padding-top: 56px;
}

.explore-widget.code-snippet {
margin: 0;
}
</style>

<!-- 👆🏼 Head -->

<!--👇🏼 Body -->

<div class="container">
<section class="relative hidden px-0 py-8 shadow-lg bg-brand-secondary sc-live-stream">
<div class="flex flex-col md:flex-row">
<div class="flex flex-col w-full">
<div class="aspect-ratio">
<!-- iframe video -->
<iframe
class="w-full sc-live-stream-video"
src=""
width="720"
height="402"
allow="encrypted-media; picture-in-picture"
allowfullscreen
frameborder="0"
></iframe>
</div>
<div
class="items-center justify-center flex-grow transition-all bg-gray-100 sc-live-stream__sc-logo"
>
<div class="block mt-2 mb-1 sc-live-stream__sc-logo--svg">
<!-- Put an SVG logo here -->

<!-- Uncomment to add some text under the logo -->
<!-- <p class="mt-2 text-center">
21st May, 12:30pm - 5pm<br /><a
href="https://twitter.com/search?q="
target="_blank"
>#hashtag</a
>
</p> -->
</div>
</div>
</div>

<div class="bg-brand-secondary sc-live-stream__chat-wrap">
<!-- iframe chat -->
<iframe
class="border-none sc-live-stream-chat"
src=""
height="100%"
width="100%"
style="min-height: 560px;"
></iframe>
</div>
</div>
</section>
</div>

<script>
// Add your iframe srcs here, along with a (partial) slug to match the page URL
const webinars = [
{
slug: '',
video: '',
chat: ''
},
];

const urlArray = document.URL.split('/');
const pageSlug = urlArray.pop();

webinars.forEach(webinar => {
if (pageSlug.includes(webinar.slug)) {
const streamEl = document.querySelector('.sc-live-stream');
const videoEl = document.querySelector('iframe.sc-live-stream-video');
const chatEl = document.querySelector('iframe.sc-live-stream-chat');

videoEl.src = webinar.video;
chatEl.src = webinar.chat;
streamEl.classList.remove('hidden');
}
});
</script>