如何在 Gridsome 中嵌入 Wistia 频道视频库 page/template
How to embed a Wistia Channel video gallery in a Gridsome page/template
我正在使用 Gridsome 构建网站。我想在其中一个页面上嵌入 Wista Channel 视频库。如果您查看代码,我想将它放在图像上方的“框架”div class 中。但是,我不确定应该将 Wistia 脚本放在哪里或如何放。任何帮助,将不胜感激。这是 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 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>
您可以将 wistia 嵌入元素标签直接放入您的 html 元素中
<div class="frame">
<!-- wistia_embed part -->
<iframe src="https://fast.wistia.net/embed/iframe/avk9twrrbn" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="620" height="349"></iframe>
<!-- or -->
<div class="wistia_embed wistia_async_j38ihh83m5" style="height:349px;width:620px"> </div>
</div>
然后将 wistia 脚本放入 vue 组件外部的 header/body 元素中。
<script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>
...
这不是理想的解决方案,但如果其他人遇到此问题,它确实有效。将 Wistia 视频集合添加到 Gridsome / Vue.js 站点的一种方法是使用带有集合 src url 的 iframe,而不是 Wistia 嵌入代码。在这种情况下,它看起来像这样:
<iframe src="https://fast.wistia.com/embed/channel/x2dh"
height = "900px"
width = "1200px"
style = "2px solid red">
</iframe>
我正在使用 Gridsome 构建网站。我想在其中一个页面上嵌入 Wista Channel 视频库。如果您查看代码,我想将它放在图像上方的“框架”div class 中。但是,我不确定应该将 Wistia 脚本放在哪里或如何放。任何帮助,将不胜感激。这是 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 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>
您可以将 wistia 嵌入元素标签直接放入您的 html 元素中
<div class="frame">
<!-- wistia_embed part -->
<iframe src="https://fast.wistia.net/embed/iframe/avk9twrrbn" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="620" height="349"></iframe>
<!-- or -->
<div class="wistia_embed wistia_async_j38ihh83m5" style="height:349px;width:620px"> </div>
</div>
然后将 wistia 脚本放入 vue 组件外部的 header/body 元素中。
<script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>
...
这不是理想的解决方案,但如果其他人遇到此问题,它确实有效。将 Wistia 视频集合添加到 Gridsome / Vue.js 站点的一种方法是使用带有集合 src url 的 iframe,而不是 Wistia 嵌入代码。在这种情况下,它看起来像这样:
<iframe src="https://fast.wistia.com/embed/channel/x2dh"
height = "900px"
width = "1200px"
style = "2px solid red">
</iframe>