html - Why can't I get this video to play on my website using Vide package?

Question

I'm using the Vide plugin to display a video on my website. But it is not working for me.

Here is what's in my HTML:

<div style="width: 1000px; height: 500px;"
  data-vide-bg="dist/media/light" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>

Here is (part of) my app's directory structure. It's the part that contains the video:

According to the instructions I see, I'm doing everything right. The video should appear on my website. However it doesn't. And here is the error I see in the console window in Google Chrome:

Why am I getting this error & why? How can I fix it?

Answer 1

Alan's suggestion was correct.

I had the line

<script src="bower_components/jquery/dist/jquery.js"></script> 

after

<script src="bower_components/vide/dist/jquery.vide.js"></script>`

When I reversed their order, the error disappeared.