问题描述
我正在使用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>
这是视频嵌入代码(来自Wistia),它嵌入了视频库:
<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>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)