# T4U Plug & Play Video Widget
## Table of Contents
- Overview
- CDN Usage
- Usage
- Explanation
- Configuration Options
- Conclusion
## Overview
The **T4U Plug & Play Video Widget** is a JavaScript library designed to easily integrate and display a collection of videos in a web application. It allows users to dynamically load videos from Firebase and provides a seamless experience for video playback.
## CDN Usage
You can include the library directly from CDN using either jsDelivr or unpkg:
### Using jsDelivr (Recommended)
```html
```
### Using unpkg
```html
```
### Example with CDN
```html
TFU Plug Play Widget
```
## Explanation
- **HTML Structure**: The HTML file includes a `div` with the class `thumbnail-container` where the widget will be rendered.
- **Script Inclusion**: The UMD bundle of the TFU Plug Play Widget is included directly from the CDN.
- **Initialization**: The widget is initialized once the DOM content is fully loaded.
## Configuration Options
The `TFUPlugPlayWidget` accepts the following configuration options:
- `querySelector` (string): The CSS selector for the container where the widget will be rendered.
- `styles` (object): Configuration for the widget's appearance.
- `thumbnail.type` (string): The type of thumbnail to display ('card' or 'circular').
- `thumbnail.container.alignment` (string): The alignment of thumbnails ('start', 'center', or 'end').
- `thumbnail.container.wrap` (string): Whether thumbnails should wrap to the next line ('wrap' or 'nowrap').
- `pageId` (string): Your unique page identifier.
- `widgetId` (string): The ID of the widget to fetch.
Example:
```javascript
const widget = new TFUPlugPlayWidget({
querySelector: '.thumbnail-container',
styles: {
thumbnail: {
type: 'circular',
container: {
alignment: 'start',
wrap: 'nowrap'
}
}
},
pageId: 'your_page_id',
widgetId: 'your_widget_id'
});
```
## Conclusion
The T4U Plug & Play Video Widget is a versatile JavaScript library designed to simplify the integration and display of video collections in web applications. It supports seamless video playback by dynamically loading videos from Firebase. The widget is easy to install and use across various frameworks, including Angular, React, and Vue.js. With straightforward configuration options and a user-friendly initialization process, it provides a robust solution for embedding video content in your projects.