Skip to content

Dragon4926/Dynamic-Youtube-Card-Gen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Video Card Creator

This project demonstrates a simple way to dynamically create and display video cards on a webpage. The createCard function generates video card elements and appends them to a container. Users can interact with the thumbnail to play a video.

Features

  • Dynamic Card Creation: Automatically generate video cards with customizable content.
  • Interactive Thumbnails: Click on the thumbnail to play a video.
  • Modern Design: Includes a glassmorphism effect and glowing border.

Preview

demo.mp4

Usage

HTML Structure

Ensure your HTML includes a container element and a button to trigger card creation.

JavaScript

The createCard function generates and appends a video card to the container. An event listener on the button will trigger this function with sample data.

CSS

The included CSS styles the card with a glassmorphism effect and a glowing border.

How It Works

  1. createCard Function: Generates and appends a video card to the .container element based on provided parameters.
  2. Button Click Event: Triggers the creation of a video card with sample data.
  3. Video Playback: Clicking the thumbnail will display a video player.

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.

About

Here's a web preview . (Only 2 cards or 1 vid can exist at a time)

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published