Javascript 尝试在Gridsome页面模板中嵌入视频库

我正在使用Gridsome构建一个JAMstack网站。我想在其中一个页面上嵌入视频库。如果你看一下代码，我想把它放在图像顶部的“frame”div类中。但是，我不知道应该如何或在哪里放置嵌入脚本。简单地将其添加到html中是不起作用的，我不确定是否需要在Vue模板中拆分嵌入代码，以某种方式导入它，或者做其他事情。任何帮助都将不胜感激。以下是Gridsome页面的代码：

<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>

导出默认值{
元信息：{
标题：“你好，世界！”
}
}
.主页链接a{
右边距：1rem；
}
.蓝色上衣{
背景图片：url（“../assets/images/top-blue bg.png”）；
宽度：100%；
}
.框架{
宽度：100%；
z指数：1；
位置：相对位置；
}
.底部背景{
宽度：100%；
位置：相对位置；
利润上限：-150px；
边缘底部：-50px；
}

这是嵌入视频库的视频嵌入代码（来自Witia）：

<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>