# Changing Video Player Style

**URL:** <https://community.hubspot.com/t/changing-video-player-style/109366>\
**Category:** CMS Development\
**Created:** [June 14, 2024, 12:16am UTC](https://community.hubspot.com/t/changing-video-player-style/109366 "2024-06-14T00:16:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![JAxtell7](https://avatars.discourse-cdn.com/v4/letter/j/b4bc9f/32.png) [@JAxtell7](https://community.hubspot.com/u/JAxtell7)\
**Post date:** [June 14, 2024, 12:16am UTC](https://community.hubspot.com/t/changing-video-player-style/109366/1 "2024-06-14T00:16:21Z")

</div>

I’m writing a custom module that plays a video. I’d like to change the style of the controller to get rid of the black gradient under the player controls and change the controls to black instead of white.

I tried changing these styles in CSS but the changes are not showing up.

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [June 14, 2024, 11:59am UTC](https://community.hubspot.com/t/changing-video-player-style/109366/2 "2024-06-14T11:59:38Z")

</div>

Hi @JAxtell7,

are you using a player-framework like [plyr.io](https://plyr.io/) or a “plain” \<video\>-tag?

Could you please provide your code/link to a demo page?

best,

Anton

---

<div class="post-metadata">

**Author:** ![JAxtell7](https://avatars.discourse-cdn.com/v4/letter/j/b4bc9f/32.png) [@JAxtell7](https://community.hubspot.com/u/JAxtell7)\
**Post date:** [June 14, 2024, 2:00pm UTC](https://community.hubspot.com/t/changing-video-player-style/109366/3 "2024-06-14T14:00:54Z")

</div>

I’m using a plain video tag but I’m open to suggestions. Here’s my code:  
html:  
\<div class=“video-container”\>  
\<div class=“video”\>  
\<video id=“videoPlayer” class=“video” autoplay muted\>  
\<source src=“[https://www.collegenet.com/hubfs/videos/series25-video-obs-1.mp4](https://www.collegenet.com/hubfs/videos/series25-video-obs-1.mp4)” type=“video/mp4”\>  
\</video\>  
\</div\>  
\</div\>  
css:

@import url(‘[https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&display=swap](https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&display=swap)’);

body {  
margin: 0;  
font-family: ‘Plus Jakarta Sans’, sans-serif;  
}

.video-container {  
position: relative;  
width: 100%;  
height: auto;  
}

.video {  
width: 100%;  
height: auto;  
}

.text-overlay {  
position: absolute;  
top: 50%;  
left: 50%;  
transform: translate(-50%, -50%);  
text-align: center;  
font-family: ‘Plus Jakarta Sans’, sans-serif;  
font-size: 52px;  
font-weight: 800;  
color: black;  
width: 80%;  
height: auto;  
}

#muteButton {  
position: absolute;  
bottom: 10px;  
left: 10px;  
background-color: black;  
border: 1px solid black;  
border-radius: 5px;  
padding: 5px 10px;  
margin: 5px;  
font-size: 14px;  
color: white;  
cursor: pointer;  
}

/\* Updated video control styles \*/  
.video-controls {  
position: absolute;  
bottom: 0;  
left: 0;  
width: 100%;  
background: none!important; /\* Set background to transparent \*/  
color: black; /\* Changed text color to white \*/  
padding: 5px; /\* Adjust padding as needed \*/  
font-family: Arial, sans-serif; /\* Adjust font family as needed \*/  
display: none; /\* Initially hide controls \*/  
}

/\* Show controls when hovering over video \*/  
video:hover .video-controls {  
display: flex;  
}

#volumeControl {  
margin-right: 10px; /\* Added margin to separate from the mute button \*/  
}  
javascript

window.onload = () =\> {  
const videoPlayer = document.getElementById(‘videoPlayer’);  
let isSecondVideo = false;

// Function to change video source based on screen width  
function changeVideoSource() {  
const newsrc=‘[https://www.collegenet.com/hubfs/videos/series25-video-obs-1.mp4](https://www.collegenet.com/hubfs/videos/series25-video-obs-1.mp4)’;  
videoPlayer.src=newSrc;  
videoPlayer.load();  
videoPlayer.muted = true; // Mute the video initially  
videoPlayer.volume = 0.2; // Set initial volume to a low level  
videoPlayer.play(); // Attempt to autoplay  
}

// Function to handle video click  
function handleVideoClick() {  
const currentsrc=videoPlayer.currentSrc;  
const newsrc=currentSrc.includes(‘obs-1.mp4’) ? ‘[https://www.collegenet.com/hubfs/videos/series25-video-vis-1.mp4](https://www.collegenet.com/hubfs/videos/series25-video-vis-1.mp4)’ : ‘[https://www.collegenet.com/hubfs/videos/series25-video-obs-1.mp4](https://www.collegenet.com/hubfs/videos/series25-video-obs-1.mp4)’;  
videoPlayer.src=newSrc;  
videoPlayer.load();  
videoPlayer.muted = false; // Unmute the video  
videoPlayer.play();

// Check if it’s the second video and toggle controls accordingly  
if (isSecondVideo) {  
videoPlayer.setAttribute(‘controls’, ‘’);  
} else {  
videoPlayer.removeAttribute(‘controls’);  
}  
}

// Call function to set the initial video source  
changeVideoSource();

// Event listener to change video source when the video is clicked  
videoPlayer.addEventListener(‘click’, () =\> {  
isSecondVideo = !isSecondVideo;  
handleVideoClick();  
});  
};

---

<div class="post-metadata">

**Author:** ![JAxtell7](https://avatars.discourse-cdn.com/v4/letter/j/b4bc9f/32.png) [@JAxtell7](https://community.hubspot.com/u/JAxtell7)\
**Post date:** [June 14, 2024, 2:23pm UTC](https://community.hubspot.com/t/changing-video-player-style/109366/4 "2024-06-14T14:23:20Z")

</div>

Here’s the link:  
[https://collegenet.com/scheduling-3](https://collegenet.com/scheduling-3)

---

<div class="post-metadata">

**Author:** ![JAxtell7](https://avatars.discourse-cdn.com/v4/letter/j/b4bc9f/32.png) [@JAxtell7](https://community.hubspot.com/u/JAxtell7)\
**Post date:** [June 14, 2024, 2:23pm UTC](https://community.hubspot.com/t/changing-video-player-style/109366/5 "2024-06-14T14:23:59Z")

</div>

video is at the top left, click on it and another video plays with the black gradient that I wan to remove.

---

<div class="post-metadata">

**Author:** ![JAxtell7](https://avatars.discourse-cdn.com/v4/letter/j/b4bc9f/32.png) [@JAxtell7](https://community.hubspot.com/u/JAxtell7)\
**Post date:** [June 14, 2024, 5:30pm UTC](https://community.hubspot.com/t/changing-video-player-style/109366/6 "2024-06-14T17:30:35Z")

</div>

and here’s the link:  
[https://collegenet.com/scheduling-3](https://collegenet.com/scheduling-3)