Tips for concealing HTML video controls on Safari Mobile

I am having an issue with displaying a video background on my website. It works perfectly in Chrome, but when I switch to Safari, the video controls are showing up. Is there any way to hide these controls or a better method to implement a video background?

Here is the code I am using for the background video:

HTML

<video id='home-bg' src={require('../assets/leojaden-video-bg-2.mp4')} muted loop autoPlay playsinline/>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#home-bg {
    position: absolute;
    filter: brightness(80%);
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    z-index: -1;
}

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

I am using Reactjs for this website, so a solution compatible with React would be greatly appreciated! :)

htmlcssreactjsvideosafari

Answer №1

To conceal the controls, simply omit the controls attribute in the video element.

<video autoplay playsinline></video>

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

apply CSS to highlight a clicked div as if it were a radio button

Is it possible to use CSS to highlight a div when clicked (when the div is acting as a label for a radio button)? Here is my code: <?php foreach ($images as $image) { ?> <input type="radio" name="id" value="<?php echo $image['id& ...

phpjqueryhtmlcss

Tips for adding an active class when a link is clicked

I am working on a Sidebar component and need to apply the active_class_link style to the DIV element when the onClick() event occurs. Although I have set up the function, I am unsure how to apply this for each DIV within my component. The desired behavior ...

javascripthtmlcssreactjs

Harnessing the Power of React with Javascript Promises

Snippet 1 async function saveToDatabase(order, ownProps) { const url = `api_url` await axios.post(url, order).then( (response) => { if (response.status == 200){ console.log("response 200") console.log(resp ...

javascriptreactjs

Move the focus to the previous input field by removing the key

I have created a phone number input with 10 fields that automatically skip to the next field when you fill in each number. However, I would like to be able to go back to the previous field if I make a mistake and need to delete a digit. How can I achieve ...

javascriptjqueryhtmlcssinput

"Adjusting Material UI Select Size - A Guide to Resizing Your

Struggling with getting Material UI selects to work properly with height and width using 'vh' and 'vw', as well as adjusting text size with 'vh'. The boxes have the correct size, but the label text is no longer centered due t ...

javascriptreactjsmaterial-ui

Guide on adding a line break between two inline-block elements

Struggling to find a way to add a line break between two div elements in this fiddle here. The issue is that I want the elements centered and also have control over line breaks. Using float allows for line breaks with: .article:after { content: ' ...

htmlcss

React js: Changing Material-UI functional code to class component results in TypeError

After utilizing the material ui login page code, I discovered that it is a functional component. To meet my specific requirements, I decided to convert it into a class component. However, during the conversion process, an error was encountered: "Cannot ass ...

javascriptreactjsauthenticationmaterial-uimaterial-design

Retrieve attachments for SharePoint list using a 302 response from the fetch API request

When attempting to retrieve attachments from a SharePoint Online list using a fetch call with the provided API, I encountered an issue. The call works fine after logging into SharePoint Online, but when trying from a guest window in Chrome, a 302 error i ...

reactjsfetchsharepoint-online

Guide to center-aligning ElementUI transfer components

Has anyone successfully incorporated ElementUI's transfer feature inside a card element and centered it? https://jsfiddle.net/ca1wmjLx/ Any suggestions on how to achieve this? HTML <script src="//unpkg.com/vue/dist/vue.js"></ ...

javascriptcssvue.jselement-ui

Do you have a title for the pre code section?

When it comes to tables, there's a <caption>, and for figures, there's a <figcaption>. But what tag should be used for pre? (The goal is to provide a caption for a listing, but since the <listing> tag has been removed, <pre& ...

htmlsemantic-markup

When printing a table in HTML/CSS, only the header will appear on the empty page

I'm struggling to figure out why there are two pages, one blank and one with just the table header in this document. The content looks fine otherwise, but I can't seem to remove these extra pages. Here is the full HTML code: <!DOCTYPE html& ...

htmlcssprinting

What is the best way to toggle between various modals, each with its own unique content, and also update the

I'm looking to toggle between different models and calculate the results in each form separately. I've been trying to avoid copying too many modal codes and came across a sample HERE, but it uses the same ID, so I'm stuck! If you click on ...

javascriptjqueryhtml

Troubleshooting Issues with XMLHTTPRequest Function During Data Insertion

My code is only working when I include this line of code: document.write(str); Essentially, this code opens a new page and writes the inserted data into the database. However, if I attempt to run the code without it, like this: function addcourse2( ...

javascriptphphtmlajaxxmlhttprequest

What methods can be used to assess the security risks posed by a third-party library implemented in a React JS application?

How can I ensure the security of third-party libraries added to my create-react-app with additional scripts? ...

javascriptreactjsnpmsonarqube

Adding items to an array in Jade

I'm currently working on creating an array in Jade and then looping through another array to create a new one. My code looks like this: .metadata4 - var prepopulate = [] - if (entry.artist_ids) - for (var arti ...

htmlnode.jsexpresspug

Implementing global dark mode for all pages in Next JS and Material UI using the useContext hook

In my Next JS project, I am working on implementing a dark mode feature across all pages. To achieve this, I am using Material UI for styling and incorporating useContext with useReducer hooks to handle the dark mode state. I have placed both the context p ...

reactjsmaterial-uinext.jsreact-contextuse-reducer

Using http-proxy-middleware in a React application for browser proxy

I'm having trouble with setting up a proxy in my React app. Scenario: I have two React apps, one running on localhost:3000 and the other on localhost:3001. What I want to achieve is that when I click on: <a href="/app2"> <button> ...

javascriptreactjsproxyreverse-proxyhttp-proxy-middleware

Turning multiple .html files into a single csv using beautifulsoup

I am dealing with a situation where I have 13,000 html files stored in a folder and my goal is to consolidate all the data into a single csv file. Although I believe I have made progress in extracting the data, I am encountering challenges when it comes t ...

pythonhtmlcsvbeautifulsoup

One way to restrict user input to only minutes in the time input field

Is there a way to implement time control that only accepts time values? For example, when entering 00:15, it automatically converts to 00 to 12. Can we ensure that only time formats are accepted? Alternatively, can we use input type="text" and re ...

javascripthtmljqueryangularjs

Verify whether the element within an iFrame contains any content

After conducting extensive research, I have been unable to find a satisfactory answer to my question. Therefore, I am reaching out to see if anyone has the knowledge I seek. The Goal: I aim to check the contents within an iFrame and determine whether it ...

javascripthtmljquery