Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lreynaldoj/react-yt-flexible
A flexible React component for embedding YouTube videos or thumbnails with advanced features
https://github.com/lreynaldoj/react-yt-flexible
advanced aspect-ratio component customizable embed flexible lazy-loading performance react react-component responsive tailwind tailwindcss thumbnails video video-player video-thumbnail youtube youtube-api
Last synced: 9 days ago
JSON representation
A flexible React component for embedding YouTube videos or thumbnails with advanced features
- Host: GitHub
- URL: https://github.com/lreynaldoj/react-yt-flexible
- Owner: lreynaldoj
- License: mit
- Created: 2024-10-12T22:12:15.000Z (27 days ago)
- Default Branch: main
- Last Pushed: 2024-10-14T12:42:20.000Z (25 days ago)
- Last Synced: 2024-10-14T14:15:44.180Z (25 days ago)
- Topics: advanced, aspect-ratio, component, customizable, embed, flexible, lazy-loading, performance, react, react-component, responsive, tailwind, tailwindcss, thumbnails, video, video-player, video-thumbnail, youtube, youtube-api
- Language: JavaScript
- Homepage: https://codesandbox.io/p/github/lreynaldoj/react-yt-flexible-examples/main?import=true
- Size: 9.34 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React YouTube Flexible
A highly flexible React component for embedding YouTube videos or thumbnails, with customizable aspect ratios, styles, and seamless integration with Tailwind CSS.
## Example Gallery
Check out these examples to see what you can achieve with `ReactYTFlexible`:
*Standard video with custom border radius*
*Thumbnail with hover effect and custom styling*
## Live Demo
Check out our [live demo](https://codesandbox.io/p/github/lreynaldoj/react-yt-flexible-examples/main?import=true) to see `ReactYTFlexible` in action and explore more usage examples.
You can also view the running app without seeing the code [here](https://react-yt-flexible-examples.vercel.app/).
## Key Features
- Embed YouTube videos or thumbnails with a single video ID.
- Customizable aspect ratios (16:9, 4:3, 21:9, 1:1, 9:16, 3:2).
- Support for custom styles and Tailwind CSS classes.
- Lightweight and easy to use.
- Perfect for responsive designs and easily adaptable to various screen sizes.
- Seamless integration with Tailwind CSS for rapid UI development.
## Installation
Install the package using npm:
```bash
npm install react-yt-flexible
```
## Usage
To use the `ReactYTFlexible` component, simply import it and pass the `videoId` of the YouTube video you want to embed:
```jsx
import React from 'react';
import { ReactYTFlexible } from 'react-yt-flexible';
function App() {
return (
{/* Standard video */}
{/* Thumbnail mode with custom border radius */}
);
}
export default App;
```
## Props
Here are the available props for the `ReactYTFlexible` component:
- **`videoId`** (string, required): The YouTube video ID.
- **`mode`** (string, optional): Either `'video'` or `'thumbnail'`. Default is `'video'`.
- **`aspectRatio`** (string, optional): `'16:9'`, `'4:3'`, `'21:9'`, `'1:1'`, `'9:16'`, or `'3:2'`. Default is `'16:9'`.
- **`borderRadius`** (string, optional): CSS border-radius value. Default is `'0px'`.
- **`style`** (object, optional): Custom inline styles.
- **`className`** (string, optional): Tailwind CSS or other class names for additional styling.
## Tailwind CSS Integration
`ReactYTFlexible` is designed to work seamlessly with Tailwind CSS, allowing you to:
- Apply Tailwind utility classes directly to the component
- Create responsive designs effortlessly
- Implement hover, focus, and other interactive states
- Utilize Tailwind's animation and transition utilities
Example:
```jsx
```
This integration allows you to rapidly prototype and build beautiful, responsive YouTube embeds without leaving your Tailwind workflow.
## License
This project is licensed under the MIT License. You can find the full license [here](https://github.com/lreynaldoj/react-yt-flexible/blob/main/LICENSE).