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.
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 thetweetxclass:Sample Video URL :<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>
https://bit.ly/bbsamplevideo| Sample Poster URL :https://bit.ly/bbsampleposter
data-viewtext- Sets the numbers of viewsdata-titleortitle- Sets the Video Titleposterordate-preview-imageordata-poster- Sets the poster of the video
You can customize the TweetX video player by adjusting the CSS variables or modifying the JavaScript as needed.
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 */
}The JavaScript provides various functionalities such as play, pause, volume control, etc. You can customize the behavior of these functions as needed.
This project is licensed under the MIT License - see the LICENSE file for details.
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.
Special thanks to the original creator of the Twitter video player clone, Ahmet Aksungur, for the inspiration and initial implementation.
If you find TweetX helpful, consider giving it a ⭐️ and sharing it with your friends!