Video-tag NPM | npm.io

Video Tag

JavaScript for making video bbcodes and similar things as simple as they can get.

Supports

YouTube videos (with timestamps)
YouTube playlists
- YouTube playlists that start from a specific video (with timestamps)
- YouTube user uploads list
- YouTube playlists that are just comma separated video IDs
Vimeo videos (with timestamps)
Vimeo albums
Twitch videos (VODs) (with timestamps)
Twitch channels
Twitch collections
Twitch clips
Mixer channels
Mixer videos (VODs)

Usage

See the github wiki for platform-specific installation instructions.

Here's a simple installation guide:

Run the build script (pnpm run build) and upload the files from the dist folder or the contents of a release zip file and include video-tag.js and video-tag.css with a <script> and <link> tag, respectively.

Once the code has been deployed to your site, it'll look for div tags with the video-tag class. If the tag has a data-source attribute with a URL in it. An example would be:

<div
  class="video-tag"
  data-source="https://www.youtube.com/watch?v=g4Hbz2jLxvQ"
></div>

This is the bare minimum, of course, so a fallback link to the source is recommended like so:

<div
  class="video-tag"
  data-source="https://www.youtube.com/watch?v=g4Hbz2jLxvQ"
>
  <a
    class="video-tag-fallback"
    href="https://www.youtube.com/watch?v=58OabCRCx_Q"
    >https://www.youtube.com/watch?v=58OabCRCx_Q</a
  >
</div>

For Jcink Forum Hosting, a 1 paramater video tag with the following content:

<div class="video-tag" data-source="(PARAM1)">
  <a class="video-tag-fallback" href="(PARAM1)">(PARAM1)</a>
</div>

should be sufficient if you have the JavaScript and CSS loaded in your board wrappers. It's recommend you style the video-tag class in your own stylesheet to how you'd like, a sample is:

.video-tag {
  margin: 1em 1em 1em 0;
  max-width: 100%;
}

Available functions

You can also call bits of the JavaScript from a third party script. We export the following functions:

getVideoTags - Returns a HTMLDivElement NodeList containing all HTML tags that match the format that haven't been parsed.
parseVideoTag - Takes an HTMLDivElement that matches the format and parses it through our code, removing the contents and placing an iframe or error message in there.
parseVideoTags - Gets all the tags via getVideoTags and parses each of them with parseVideoTag.
urlToEmbedUrl - Take a video URL and get just the embed URL for it.

Notes

YouTube links that include both a playlist and video ID will embed the video and not the playlist. YouTube playlist embedding does not support starting from a specific video and it's probably more likely a user wants to embed the video they have a link to and not the playlist it belongs to.
Twitch embeds don't work on Internet Explorer 11. This seems to be an issue on their end, let them know since they appareltny say they should support Internet Explorer 11.
ID-only sources only work for video IDs and Twitch channels- everything else will require a full URL as the source parameter even with the provider param set.
- For Mixer, only channel IDs work. This is because Mixer requires the correct channel to embed a VOD.