I am building a website using Gridsome. I want to embed a Wista Channel video gallery on one of the pages. If you look at the code, I want to place it in the "frame" div class on top of the image that's there. However, I am not sure where or how I should put the Wistia script. Any help would be appreciated. Here 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>
and 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>
This is not the ideal solution, but it does work if anyone else comes across this issue. One way to add a Wistia video collection to a Gridsome / Vue.js site is to use an iframe with the src url of the collection, instead of the Wistia embed code. In this case it looks like this:
<iframe src="https://fast.wistia.com/embed/channel/x2dh"
height = "900px"
width = "1200px"
style = "2px solid red">
</iframe>