Youtube Player Widget

A simple widget to play youtube videos in Foundry VTT with playlist functionality

How to use

• Access the interface above the Player List on the bottom left of the screen
• Paste a youtube video link in the input field
• Click the Play button to simply play and sync the video to all players
• Click the Stop button to stop the video
• Click the Add button to add the video to a playlist
• Click the Playlist button to open the playlist interface
• Hover over buttons to see their functionality

Main Toolbar

Here you can find all the main controls for the player, you can Hover over the buttons to see their functionality.

Search interface

• Type and press enter or the search button to search for a video
• Click on a video to set it's URL in the url field
• Double click on a video to play it immediately

Library

With the library button you can open the library interface, where you can collect videos into a single list where you can categorize them using custom, configurable tags.

• Open the library interface by clicking on the library button
• In the header of the library Interface, click on the ... button to access the bulk importer and the tags configuration
• Add and categorize your videos

Enrichers

@YT

You can use the @YT enricher to add a youtube video link to a Journal, description, or any other field that supports enrichers. Note that you need to use the video ID and not the full URL otherwise foundry won't be able to parse it correctly.

@YT[videoId]{Video Title}

Clicking on the link will start the video in the youtube player widget.

FAQ

Can I hide the video?

Unfortunately, hiding the video is not an option as it contravenes YouTube's terms of service. For this reason, the module does not accommodate this feature.

It's worth noting that attempting to hide the video using CSS would create a confusing user experience where audio is playing but no controls are present, rendering it an inadequate solution.

How do ADs work?

The module utilizes the YouTube API to stream videos, which includes any accompanying advertisements. If the video contains ads, they will be displayed during playback. However, if you are logged into the same browser with a YouTube Premium subscription, ads will be automatically skipped.

It's important to understand that ad handling is user-specific. Therefore, if one user has YouTube Premium while another does not, ads will only be bypassed for the Premium user.

API

Resetting the Widget position

In the event the window is placed in and undesirable position, you can reset it to the default position by running the following command in the console or as a macro:

game.settings.set("fvtt-youtube-player", "windowPosition", { x:0 ,y:0 } )

Refresh the page to see the changes.

Setting the current video

You can set the current video by running the following macro (GM only):

game.settings.set("fvtt-youtube-player", "currentVideo", "videoURL")

Using your own YouTube API Key

The module utilizes a public API key to process search and playlist fetch requests. However, this key is subject to usage limits, which can lead you to not be able to perform these actions. To avoid this, you can use your own YouTube API key.

1. Sign in to Google: If you don't have a Google account, you'll need to create one. If you already have one, proceed to sign in to your Google account.

2. Go to Google Cloud Console: Open your web browser and navigate to the Google Cloud Console (opens in a new tab).

3. Create a new project (if necessary): If you don't have any projects listed or if you want to create a new one, click on the project drop-down menu at the top of the page, then select "New Project". Follow the prompts to create a new project and give it a name.

4. Enable the YouTube Data API v3: In the Cloud Console, navigate to the "APIs & Services" > "Library" page using the sidebar menu.

5. Search for YouTube Data API v3: In the search bar, type "YouTube Data API v3" and select it from the search results.

6. Enable the API: On the YouTube Data API v3 page, click the "Enable" button. This will enable the API for use with your project.

7. Create API Key: After enabling the API, go to "APIs & Services" > "Credentials" using the sidebar menu.

8. Create Credentials: Click on the "Create Credentials" drop-down menu and select "API key".

9. Copy your API Key: Once your API key is created, you will see it displayed on the screen. Copy the API key.

10. Set up your API Key in Foundry VTT: In Foundry VTT, navigate to the "Settings" > "Module Settings" > "YouTube Player Widget" page. Paste your API key into the API field.

That's it! You are no longer limited by the public API key usage limits.

CSS

The module offers some classes you can use to customize the player if you wish to do so. Note that it's against YouTube's terms of service to hide the video, but you can customize other things such as it's border.

Customizing the border for GMs and Players

.fvtt-youtube-player-is-gm-true{
    border: 1px solid red;
}
 
.fvtt-youtube-player-is-gm-false{
    border: 1px solid blue;
}
```import {library} from '@fortawesome/fontawesome-svg-core';import {config} from 'process';
import {Interface} from 'readline';