Custom JS Help (afterglow)

So, I really don’t like the video player that Blocs has, so I have been looking for an alternative (besides embedding from other hosting services like YouTube/Vimeo).

I stumbled upon afterglow (http://afterglowplayer.com/). It includes a custom JS file with custom code.

I uploaded the JS file to the web page and added the HTML code into an HTML Widget bric.

Here is a screenshot of the error that I am getting:

So, what I think the problem is, the HTML code is not detecting the video in the assets folder.

Here is the documentation link for afterglow:

If anyone has every used afterglow or JS files, can you please help me a little haha :sweat_smile:

Thanks in advance :slight_smile:

I’m limited on time to help, but I’d first look at how you are referencing the video file. Try using the Bloc shortcodes (see documentation) could help you get the correct path.

I can’t solve this but I can add to the mystery.

If I just enter the code into an html bric and id it as per the instructions (the bloc not the code widget) without adding any code to the header then I get a preview of my designated video on the page within the script snippet but again it fails on the browser preview. So the source address works - therefore it must be something else?

Hey @hebodi

Try this…

In the header add the Afterglow script (this is pulling from a CDN)

<script src="https://cdn.jsdelivr.net/npm/afterglow@0.0.3/js/afterglow.min.js"></script>

in a code bric add

<video class="afterglow" id="myvideo" width="1280" height="720">
      <source type="video/mp4" src="%baseURL%/myvideo.mp4" />
</video>

The %baseURL% is a short code and Blocs will populate it with the URL you set in Project Settings. Just as @Whittfield mentioned above.

1 Like