How to embed a Wistia Channel video gallery in a Gridsome page/template

Question

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>

Tiktac · Answer 1 · 2021-07-28T09:24:45.020

0

You can put wistia embed element tag into your html element directly

<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">&nbsp;</div>
</div>

Then put wistia script into your header/body element, outside vue component.

<script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>
...

edited Jul 28 '21 at 09:24

answered Jul 27 '21 at 09:26

Tiktac

966
1
12
32

Hi! Thanks for your post. Unfortunately, your recommendation triggers an error. Gridsome doesn't allow scripts in the template, rather it wants them in the scripts section of the component/page, but I haven't had any luck breaking the code block up and putting each part where Gridsome wants it. – Psychedelic Wizard Jul 28 '21 at 04:21
1

Wistia has inline standard and fallback script types, while you can use fallback as an iframe, and put ``` wistia.js ``` part in header or body, out side vue component. Check this https://wistia.com/support/embed-and-share/media-on-your-website – Tiktac Jul 28 '21 at 09:13

score 0 · Accepted Answer · answered Jul 28 '21 at 04:48

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>

How to embed a Wistia Channel video gallery in a Gridsome page/template

2 Answers2