Need help in serving CSS and JS for a Custom JS Library (plyr js [plyr.io])

support
1

I plan on integrating a video player in my Hugo site (with Plyr JS) and I need to know where to put the js and css files.

The integration works well when served from a CDN. I do not plan on optimizing or modifying the css or js. So, here are the questions I have

  1. Where should I keep these css and js files?
  2. How should I reference the said files in my hugo shortcode?

vid-player.html

{{ "<!-- Plyr.js styles -->" | safeHTML }}
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css"> 

{{ "<!-- Plyr.js scripts -->" | safeHTML }}
<script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>

{{ "<!-- Plyr.js customizations -->" | safeHTML }}
<link rel="stylesheet" href="{{ "css/custom.css" | relURL }}">

{{ "<!-- Plyr.js player -->" | safeHTML }}
<br>
<video id="plyr-video-player" controls>
    <source src="{{ .Get "src" }}" type="video/mp4">
</video>
<br>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const player = new Plyr('#plyr-video-player',{
            disableContextMenu: true
        });
    });
</script>

I did check out other topics, but I was not able to grasp the concept.

2

From your example above there’s only one local file: custom.css. And based on how you set its href attribute, you should place the file in the static/css directory.

3

Thanks for the quick reply.

Yes, but I have the CDN resources downloaded and kept in assets/css/plyr.css and assets/js/plyr.js respectively.

I need assistance on how I reference them in the shortcodes html file. I have all these files placed in the assets directory.

4

See https://gohugo.io/functions/resources/get/

1 Like
5

Ahh,It worked and thanks a ton @jmooring. Here is what I did in my shortcodes html file.

{{ "<!-- Plyr.js styles -->" | safeHTML }}
<!-- <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css"> -->
{{ with resources.Get "css/plyr.css" }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

{{ "<!-- Plyr.js scripts -->" | safeHTML }}
<!-- <script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script> -->
{{ with resources.Get "js/plyr.js" }}
<script src="{{ .RelPermalink }}"></script>
{{ end }}

{{ "<!-- Plyr.js customizations -->" | safeHTML }}
<link rel="stylesheet" href="{{ "css/custom.css" | relURL }}">

{{ "<!-- Plyr.js player -->" | safeHTML }}
<br>
<video id="plyr-video-player" controls>
    <source src="{{ .Get "src" }}" type="video/mp4">
</video>
<br>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const player = new Plyr('#plyr-video-player',{
            disableContextMenu: true
        });
    });
</script>

Note: I have kept my css and js in the assets directory.

6

Hi @patrickambrosso, I’m using Plyr too, mainly for audio files but videos are supported too.
I drafted a tutorial, you may find some interesting bits: Hugo: embed audio files with Plyr.io and a Shortcode | Roneo.org

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.