Modifying HTML video player style using jQuery

I am currently working on hiding the gradient and timeline components of an HTML video player using jQuery or JavaScript.

Although I have successfully achieved this using CSS:

video::-webkit-media-controls-panel {
    background-image: none !important;
    filter: brightness(0);
}

video::-webkit-media-controls-timeline {
    display: none;
}

However, I want to apply this CSS dynamically through JavaScript only after the video has a source. This way, I can include specific conditions.

I attempted the following approach, but unfortunately, it did not yield the desired results:

$('video::-webkit-media-controls-panel').css({
    'background-image': 'none !important',
    'filter': 'brightness(0)'
});

$('video::-webkit-media-controls-timeline').css({
    'display': 'none'
});

If anyone has insight on how to make this functionality work correctly, please share your expertise!

javascriptjqueryhtmlcss

Answer №1

To resolve this issue, I utilized JavaScript to dynamically add a style tag to the head section of the document with the specified styles as per your requirements. Instead of traditional string concatenation, I opted for the ES6 template literal syntax for better readability and maintainability. This solution was thoroughly tested in Chrome browser.

https://i.sstatic.net/2zZvW.gif

$(`<style>
    video::-webkit-media-controls-panel,
    video::-webkit-media-controls-timeline{display: none;} 
    video::-webkit-media-controls-panel{background-image:none !important}    
   </style>`).appendTo('head');

Check out the code on jsFiddle

Answer №2

This alternative method, similar to Andy's approach, is designed to function seamlessly with text editors such as Atto in Moodle. This solution automatically eliminates any instances of <style> tags:

var styleElement = document.createElement("style");
styleElement.innerHTML = "video::-webkit-media-controls-panel { background-image: none !important; filter: brightness(0); } video::-webkit-media-controls-timeline { display: none; }";
$("head").append(styleElement);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jquery is failing to recognize the HTML generated by ajax

Upon successful login, the website displays a button with the HTML code below: <button class="logout-button">Logout</button> The button is also hardcoded into the website's HTML for consistency. However, after refreshing the page, the AJ ...

javascriptjqueryhtmlajax

Pugs are unable to interpret arrays unless they are actively scanning through each element

Currently, I am engaged in a small Web development project for a University course. The project involves using Express with Pug as the view engine. My goal is to iterate through an array of weather stations, creating a unique route for each one. Each route ...

javascriptexpresspug

Retrieving Extensive Information for Display on Data Table - Incorporating ReactJS

I am currently facing a challenge with my web page that contains a table populated with 20,000 rows of data fetched from my database. To enhance performance, I have stored this large dataset in localStorage. However, when users navigate to this particular ...

javascriptreactjs

Is it recommended to use the "hasClass" function prior to implementing the "addClass" function?

Upon stumbling upon this specific code snippet, I noticed that it checks if an element has the class a, and if not, it adds it: if (!$("div").hasClass("a")){ $("div").addClass("a"); } Since jQuery doesn't add the class if it's already presen ...

jqueryperformanceaddclass

Transitioning from traditional Three.js written in vanilla JavaScript to React Three Fiber involves a shift in

I am currently faced with the task of converting a vanilla JS Three.js script to React Three Fiber. import * as THREE from 'three'; let scene, camera, renderer; //Canvas const canvas = document.querySelector('canvas') //Number of lin ...

javascriptreactjsthree.jsreact-three-fiber

Could there be an issue with the directory path for the file?

https://i.stack.imgur.com/m8F9y.pngThe background-url() function was utilized to set the background screen to PurpleCloud.png. Despite multiple attempts, the image is still not being displayed. What could be the issue? Even after understanding file path w ...

cssurl

What is the best way to make Bootstrap 3 move to a new line when there is not enough space?

I am facing an issue with a lengthy text inside a div with a class of "col-md-3". The text is so long that it appears to be overlapping with the content of another div. Adding spaces is not an option as it is an email address, and it displays fine on some ...

htmlcsstwitter-bootstrap

The alternating colors in the sorting table are not visible due to the divs being hidden with the display set

I've come across a problem that has me stumped. So, there are two sorting filters on a table and one of them hides rows that don't apply, messing up the alternating colors. Take a look at the function that sorts and the CSS below. The issue is pr ...

javascriptjqueryhtmlcss

I'm wondering if there is a method for me to get only the count of input fields that have the class "Calctime" and are not empty when this function is executed

Currently, I am developing an airport application that aims to track the time it takes to travel between different airports. In this context, moving from one airport to another is referred to as a Sector, and the duration of time taken for this journey is ...

javascripthtmlcss

Attempting to align a FieldSet in the middle of the page

Having trouble aligning a field set within a div. The first two elements are centered right next to each other, but the third one is justified left and I'm struggling to center it within the div. JSP <tr> <th> <span onclick="toggleDiv ...

htmlcss

Having trouble with my inline CSS not working with the NextJS Image component

Why am I unable to style the Image component in NextJS to manipulate my image? Am I overlooking something? <Image className={styles.bg} style={{ transform: `translateY(${offset * 0.5}px)` }} src="/../public/bg.jpg" // ...

javascriptreactjsnext.jsnextjs-image

Send all state values to the child component

I have an old application that sends a JSON to generate a multi-page form. I'm working on creating a universal multi-page form component where we can simply input a JSON to produce a form. The app utilizes a function called buildFormState which initi ...

javascriptjsonformsreactjs

Exploring Alternatives to Hidden Fields in HTML

Similar Inquiry: Alternatives to Hidden Field in HTML Currently, I am utilizing a hidden field to conceal certain information on emails that are deemed confidential. Despite successfully extracting the hidden fields using Java, I encounter an issue wh ...

htmloutlook

Tips for ending a setInterval loop

I have created a setInterval function in JavaScript to switch the color of a div by applying different CSS classes. Initially, I trigger this color change by pressing a button. However, I am also trying to stop the color transition using the same button bu ...

javascriptsetinterval

Unexpected horizontal scrolling problem on my bootstrap webpage

I'm currently experiencing a horizontal scrolling issue on my Bootstrap page. Can anyone provide insight into why this might be happening? You can view my page here. Here is a snippet of my CSS code: @media (min-width: 1400px) and (max-width: 1440px) ...

jquerycsstwitter-bootstrap

Exploring the potential of integrating the DOMParser in Node.js

Encountering difficulties while attempting to utilize the DOMParser in my JavaScript code. I am fetching an XML file through xmlhttp.responseText soap response and aim to access its elements in JSON format using the following code: var xml = new DOMParser( ...

javascriptnode.jsxmldomparser

Issue: TypeError - 'process.env' can only accept a configurable while installing windows-build-tools

Unable to successfully download installers. Encountered an error: TypeError: 'process.env' can only accept a configurable, writable, and enumerable data descriptor. I attempted to resolve this issue by running the command npm install --global wi ...

javascriptnode.js.netangularnpm

Issue with radio button list not functioning properly in Mozilla and Chrome browsers

My web application has a radiobuttonlist with an onclick event. It functions properly in IE, but not in some other browsers. Here is a snippet of the code: <asp:RadioButtonList ID="rbgThreadStatus" runat="server" RepeatDirection=&quo ...

javascripthtmlasp.netgoogle-chromedom-events

BootStrap Modal: Experience issues with multiple modals opening simultaneously, causing the page to freeze after the last modal is closed

I'm having trouble understanding this, but I have 2 modals <!-- Upload Document Modal 1 --> <div class="modal fade" id="uploadFileModal" tabindex="-1" role="dialog" aria-labelledby="uploadFileModalLabel" aria-hidden="true"> <div cl ...

jquerylaravelbootstrap-4bootstrap-modal

Can the change listener be used to retrieve the selected option's number in a form-control?

This particular cell renderer is custom-made: drop-down-cell-renderer.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-drop-down-cell-renderer', templateUrl: './drop-down-cell-r ...

angularhtmlcssbootstrap-4