Question 194840 in Html Question posted in
Some basic documentation can be found here.

Html – How to remove or move play default video button on mobile website with CSS or JavaScript

I’m trying to add a background video on my website. When I preview the website on my chrome app on iOS, i notice that the video doesn’t play automatically and this play button appears in the middle of my page. The problem is this play button is behind some content so it’s unclickable. I want to move it or hide it in with CSS or JavaScript. Is this possible?

enter image description here

Tags:

3

Answers


  1. 0

    You can adjust the z-index of the video to appear above the other content.

    .video {
    z-index: 1000;
}

    Or you can make the visibility of the content hidden.

    .content {
   visibility: hidden;
}
    Login or Signup to reply.
  2. 0

    Yes, I think it is possible. These two approaches may help,

    1. Using CSS:
      You can hide the default play button using CSS by targeting the specific element that represents the play button and setting its display property to none. Something like,
    .your-video-element::-webkit-media-controls-start-playback-button {
    display: none;
}
    1. Using Javascript:
      This may not be the efficient way yet may solve your problem
    const vidElement = document.querySelector('.your-video-element');

vidElement.addEventListener('loadedmetadata', function() {
  // Hide the default play button
  vidElement.setAttribute('controls', 'false');
  
  // Move the default play button off-screen
  vidElement.style.position = 'relative';
  vidElement.style.left = '-9999px';
});

    Remember to replace .your-video-element with the actual selector for your video element or container in both approaches.

    The play button element is targeted in the CSS technique, and its display attribute is set to none to essentially hide it from view.

    In the JavaScript method, we include an event listener for the video element’s loadedmetadata event. We conceal the default play button by setting the controls attribute to false when the event is triggered, and we then move the element off-screen by adjusting its position using CSS.

    Login or Signup to reply.
  3. 0

    There are multiple ways you can approach this problem. For example, you can use the CSS properties of the following:

    opacity: 0%; // This is to hide the content of the play button. //

    And then approach the "unclickable situation" by manipulating the z-index.

    z-index: 1; // This can be viewed as a sort of "layer" the HTML element is representing //

    However, if the big issues come with having an unplayable video, I would need to see more information about your HTML and CSS statement. (Assuming if you are using <video>)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search