Have you ever needed a custom YouTube video player for your projects but wanted to hide YouTube's default styles, such as the title, logo, and controls? Look no further than csPlayer — a lightweight, customizable JavaScript player designed to give you full control over the YouTube video experience, including the ability to hide unwanted elements like the logo and default controls, while still simplifying the embedding process.
Check it Out!
Explore the full potential of csPlayer with a live demo and the complete source code on GitHub:
Dive in and see how easily you can take full control over your embedded YouTube videos!
What is csPlayer?
csPlayer is a JavaScript-based custom YouTube video player that gives developers more flexibility than the standard YouTube iframe player. Whether you want to change the theme, customize the appearance, or control video playback programmatically, csPlayer has you covered.
You can see it in action with this demo.
How to Install csPlayer
Getting started with csPlayer is straightforward. You’ll first need to include YouTube’s iframe API in your HTML file:
<script src="https://www.youtube.com/iframe_api"></script>
Next, include the necessary csPlayer files. You can either download them from the source or use a CDN for ease:
<link rel="stylesheet" href="csPlayer.css">
<script src="csPlayer.js"></script>
Alternatively, using the CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/abtp2/csPlayer/src/csPlayer.css">
<script src="https://cdn.jsdelivr.net/gh/abtp2/csPlayer/src/csPlayer.js"></script>
Core Features and Methods
csPlayer provides an array of useful methods to manage video playback, such as:
1. init() - Initializes the player in your document with customizable options like default video ID, thumbnail, and theme.
csPlayer.init("video", {
defaultId: "RKERYQwvlFw",
thumbnail: true,
theme: "default",
loop: false,
});
The init method allows customization, like setting the default video to play, applying a theme, and enabling looping.
2. changeVideo() – Change the video dynamically without reloading the player.
csPlayer.changeVideo("video", "kJQP7kiw5Fk");
3. play() and pause() – Control playback with ease.
csPlayer.play("video");
csPlayer.pause("video");
4. getDuration() and getCurrentTime() – Retrieve the duration and current time of the video.
var duration = csPlayer.getDuration("video");
var currentTime = csPlayer.getCurrentTime("video");
5. getPlayerState() – Get the current player state (e.g., playing, paused, buffering, etc.).
var state = csPlayer.getPlayerState("video");
6. destroy() – Clean up and remove the player instance from the DOM.
csPlayer.destroy("video");
Customizing the Look with CSS
One of csPlayer’s standout features is its ability to be fully customized using CSS variables. You can tweak everything from the background color to button sizes and icons.
Here's a sample customization:
#video .csPlayer {
--playerBg: #000;
--playerColor: #fff;
--settingsBg: #181818;
}
This flexibility lets you seamlessly integrate csPlayer into your website’s design without needing to change the underlying code.
Full Example
To demonstrate how easy it is to integrate csPlayer, here’s a basic HTML example that initializes the player with a default video:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://www.youtube.com/iframe_api"></script>
<link rel="stylesheet" href="csPlayer.css">
<title>csPlayer Example</title>
</head>
<body>
<div id="video"></div>
<script src="csPlayer.js"></script>
<script>
csPlayer.init("video", {
defaultId: "RKERYQwvlFw",
thumbnail: true,
theme: "default",
loop: false,
});
</script>
</body>
</html>
Why Use csPlayer?
csPlayer provides more than just basic YouTube video embedding. It offers:
- Customization: Change themes, thumbnails, and the player's overall appearance with just a few lines of code.
- Programmatic control: Get and set video properties, control playback, and handle different player states with ease.
- CSS flexibility: Style the player to match your brand or website design.
Final Thoughts
csPlayer is perfect for developers who need more control over their embedded YouTube videos but don’t want the hassle of dealing with complicated APIs. With its easy setup, versatile methods, and flexible CSS options, csPlayer is a powerful tool to have in your web development toolkit.
Get Involved!
If you like what you see, feel free to:
- ⭐ Star the project on GitHub to support its development.
- 🍴 Fork it to customize the player even further.
- 🐛 Submit issues or contribute new features to help make csPlayer better.
- 💬 Share your feedback and use cases in the repository’s discussions or open a pull request.
Thank you for checking out csPlayer—let’s make video playback better together!
Top comments (2)
That's exactly what I was searching for, I got my brain stuck while trying to hide YouTube's logo, title & controls from the iframe and got nothing but frustration. This project(csPlayer) literally solved my problem. Thank you so much!
❣