TweetX

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:

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">

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>

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

Find us on GitHub
Follow us on Twitter

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

This site is open source. Improve this page.