Skip to content

SH20RAJ/TweetX

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TweetX

License GitHub stars GitHub forks Twitter Visitors

A Twitter video player clone for embedding Twitter-style video players on your website. TweetX Video Player - A Twitter/X UI HTML5 Video Player

Key Features:

  • 🎥 Sleek Twitter-like Design: Get the Twitter video player look and feel on your website.
  • 🎨 Customizable: Easily tweak colors and styles to match your website's theme.
  • ▶️ Play, Pause, Volume Control: All the essential video player functionalities.
  • 📐 Responsive: Works seamlessly on desktops, tablets, and mobile devices.
  • 💻 Lightweight: Minimal footprint for fast loading times.

Codepen | Demo | Dev.to


Installation

To use the TweetX video player on your website, follow these steps:

  1. Include the CSS file in the <head> section of your HTML:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/TweetX/TweetX.min.css">
  2. Include the JavaScript file at the bottom of your HTML, just before the closing </body> tag:

    <script src="https://cdn.jsdelivr.net/gh/SH20RAJ/TweetX/TweetX.min.js"></script>

Use both in head tag

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/TweetX/TweetX.min.css">
<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/TweetX/TweetX.min.js" defer async></script>
  1. Place your <video> element with the tweetx class:
    <video class="tweetx" poster="path/to/your/sample.png" data-viewtext="200.5K views" tabindex="-1" data-video="" allowfullscreen="false" controlslist="nodownload" >
      <source src="path/to/your/video.mp4" type="video/mp4">
    </video>
    Sample Video URL : https://bit.ly/bbsamplevideo | Sample Poster URL : https://bit.ly/bbsampleposter

APIs

Attributes

  • data-viewtext - Sets the numbers of views
  • data-title or title - Sets the Video Title
  • poster or date-preview-image or data-poster - Sets the poster of the video

Usage

You can customize the TweetX video player by adjusting the CSS variables or modifying the JavaScript as needed.

CSS Variables

You can modify the following CSS variables to change the appearance of the video player:

:root {
  --primary-color: #1da1f2;        /* Main color used for controls */
  --secondary-color: #657786;      /* Secondary color for text and icons */
  --bg-color: #15202b;             /* Background color */
  --slider-color: #1da1f2;         /* Color of sliders and progress bars */
}

JavaScript

The JavaScript provides various functionalities such as play, pause, volume control, etc. You can customize the behavior of these functions as needed.


License

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


Contributions

Contributions are welcome! Please feel free to submit a pull request or open an issue if you encounter any problems or have suggestions for improvements.


Acknowledgements

Special thanks to the original creator of the Twitter video player clone, Ahmet Aksungur, for the inspiration and initial implementation.


Connect with Us


If you find TweetX helpful, consider giving it a ⭐️ and sharing it with your friends!

About

TweetX Video Player - A Twitter/X UI HTML5 Video Player

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published