I'm currently working on a Gridsome website and I'd like to incorporate a Wistia Channel video gallery into one of the pages. Specifically, I want to place it within the "frame" div class on top of the existing image. However, I'm unsure about where or how to insert the Wistia script. Any assistance would be greatly appreciated. Below is the code for the Gridsome page:
<template>
<Layout>
<div class="top-blue">
<div class="frame">
<g-image class="frame" src="../assets/images/top-frame.svg"/>
</div>
<div>
<g-image class="bottom-bg" src="../assets/images/bottom-bg.svg"/>
</div>
</div>
</Layout>
</template>
<script>
export default {
metaInfo: {
title: 'Hello, world!'
}
}
</script>
<style>
.home-links a {
margin-right: 1rem;
}
.top-blue{
background-image: url("../assets/images/top-blue-bg.png");
width:100%;
}
.frame{
width:100%;
z-index:1;
position: relative;
}
.bottom-bg{
width:100%;
position: relative;
margin-top:-150px;
margin-bottom:-50px;
}
</style>
Here is the embed code for the Wistia Gallery:
<script src="https://fast.wistia.com/assets/external/channel.js" async></script><link rel="stylesheet" href="https://fast.wistia.com/embed/channel/project/x2dhyl75kf/font.css" /><div class="wistia_channel wistia_async_x2dhyl75kf mode=inline" style="min-height:100vh;position:relative;width:100%;"></div>