how to properly embed a JW Player script into VueJS?

Question

I'm new to VueJS and trying to setup a simple page and embed a script to play HLS video using JW Player the script provided by JW Player dashboard <script src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.js"></script>

What would be the proper way to embed that script into .vue file

Knowing .vue files should have template, script and style elements and my understanding is it has to go inside script as a part of data but I'm quite confused on how I would do that and call it inside the template to view it in the browser??

Any help would be appreciated

take a look at this: https://stackoverflow.com/questions/49330055/how-to-include-a-cdn-to-vuejs-cli-without-npm-or-webpack — Ahmad Mobaraki, Apr 18 '19 at 20:07

score 3 · Accepted Answer · answered Jun 05 '19 at 18:50

As you've discovered, <script> tags cannot be embedded in Vue.js. However, <iframe> is a valid tag. The JW Platform allows for you to embed videos via a script tag OR an iframe tag.

Change this:

<script src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.js"></script>

Into this:

<iframe src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.html"></iframe>

Notice that the .js changes into .html and script changes into iframe

You may need to customize the iframe to fit your usage properly, some reference docs for how to do that can be found here.

Thank you kind sir! your help is much appreciated. – Neenus Jun 07 '19 at 03:01 — Neenus, Jun 07 '19 at 03:01

how to properly embed a JW Player script into VueJS?

1 Answers1