DEV Community

Cover image for csPlayer: A Customizable YouTube Video Player for Your Projects
Ashutosh_dev
Ashutosh_dev

Posted on • Updated on

csPlayer: A Customizable YouTube Video Player for Your Projects

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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,
});
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

   3. play() and pause() – Control playback with ease.

csPlayer.play("video");
csPlayer.pause("video");
Enter fullscreen mode Exit fullscreen mode

   4. getDuration() and getCurrentTime() – Retrieve the duration and current time of the video.

var duration = csPlayer.getDuration("video");
var currentTime = csPlayer.getCurrentTime("video");
Enter fullscreen mode Exit fullscreen mode

   5. getPlayerState() – Get the current player state (e.g., playing, paused, buffering, etc.).

var state = csPlayer.getPlayerState("video");
Enter fullscreen mode Exit fullscreen mode

   6. destroy() – Clean up and remove the player instance from the DOM.

csPlayer.destroy("video");
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
elzipo profile image
El Zipo

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!

Collapse
 
ashutosh_dev profile image
Ashutosh_dev