Changing Video Player Style

[JAxtell7]

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.

[JAxtell7]

and here's the link:
https://collegenet.com/scheduling-3

[JAxtell7]

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

[JAxtell7]

Here's the link:
https://collegenet.com/scheduling-3

[Anton]

Hi @JAxtell7, 

are you using a player-framework like plyr.io or a "plain" <video>-tag?

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

best, 

Anton

[JAxtell7]

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" type="video/mp4">
</video>
</div>
</div>

css:

@import url('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';
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-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();
});
};