Hide custom video controls from view

For a while, I was able to hide the controls on my page using position:absolute; and bottom:-36px, which made them pop up when hovering over the player. Recently, however, I noticed that I can now scroll down to see them. How can I maintain the slide-up effect without this scrolling issue?

Additionally, I set the controls div with line-height:36px expecting it to be 36px in height, but it is actually 38px. This extra 2px of space makes bottom:-36px somewhat ineffective since 2px are still visible. I'm wondering where these extra pixels are coming from.

Check out a sample here

Any advice on how to resolve these issues and understand the cause would be greatly appreciated. Thank you.

EDIT1:

Thanks to Fahad, I was able to solve the initial problem by adding position:relative; to the parent div. However, I'm still puzzled as to why line-height adds those mysterious extra pixels.

Assigning a relative position to the parent div uncovered another issue - sometimes, when scrolling inside the "player," the controls no longer stay at the bottom. Take a look for yourself:

Explore the updated sample here

EDIT2:

It seems that replacing position:absolute; with position:fixed; in the controls div easily resolves the scrolling problem. I am currently testing to ensure that this adjustment does not interfere with any other aspects of the design.

htmlcss

Answer №1

To prevent vertical scrolling, you can apply the CSS property overflow-y: hidden; to the body tag and adjust the value of bottom to -38px.

html,
body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  color: #EEE;
  margin: 0;
  overflow-y: hidden;
}
#player {
  background-color: #333;
  text-align: center;
  height: 100vh;
}
#toggle {
  margin: auto;
  width: 500px;
  font-size: 24px;
  line-height: 60px;
  background-color: #B83B3B;
}
#toggle:hover + #controls {
  bottom: 0;
}
#controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -38px;
  line-height: 36px;
  background-color: #B83B3B;
  transition: bottom 0.3s ease;
}
#left {
  float: left;
}
#right {
  float: right;
}
#curTime {
  font-size: 13px;
  font-weight: bold;
  margin: 0px 8px;
  display: inline-block;
  vertical-align: middle;
}
#center {
  overflow: hidden;
}
#seekBar {
  -webkit-appearance: none;
  outline: none;
  background-color: #1F7783;
  height: 6px;
  margin: 0;
  width: 100%;
}
#seekBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #EEE;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  cursor: pointer;
  opacity: 0.8;
}
.button {
  margin: 0px 8px;
  font-size: 24px;
  display: inline-block;
  vertical-align: middle;
}
<div id="player">
  <div id="toggle">Hover to show controls.</div>
  <div id="controls">
    <div id="left">
      <div class="button">P</div>
      <span id="curTime">0:01</span>
    </div>
    <div id="right">
      <div class="button">M</div>
      <div class="button">F</div>
    </div>
    <div id="center">
      <input type="range" id="seekBar" step="any">
    </div>
  </div>
</div>

Take a look at this demonstration on CodePen.

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

An individual in a chat App's UserList experiencing issues with incorrect CSS values. Utilizing Jquery and socketio to troubleshoot the problem

Currently, I am testing a new feature in a chat application that includes displaying a user list for those who have joined the chat. The challenge is to change the color of a specific user's name on the list when they get disconnected or leave the cha ...

javascriptjquerycsssocket.io

When hovering over it, an element within an li tag appears larger than its parent element

I'm currently working on a project for my school classes and running into an issue with CSS. I'm trying to enclose everything in boxes, but it's proving to be quite challenging. The main problem I'm facing is that when I hover over the ...

htmlcss

The CSS Media Query won't be effective for a precise 767

I have created an HTML file that changes the background color based on the browser width. When the width is 769, the background color is set to white. At 768, it changes to green. However, when the width is 767, I expected it to become red but it still rem ...

cssmedia-queries

What methods can I implement to prevent my boxes from becoming stretched out?

How can I prevent this box from stretching too much? Here is the code snippet along with the output: CSS: .social { padding-left: 1000px; border: 5px inset black; margin: 4px; width: 100px; } HTML: <div class="social"> <p& ...

htmlcssweb

The jQuery fadeToggle function toggles the visibility of an element starting from hidden instead

I'm having an issue where text in my div only appears on the second click, instead of the first. What could be causing this problem? $('#fPaperCirclePic').on('click', function () { $('#fPaperCircleText, #isargebla, #moq10 ...

javascriptjqueryhtmlcss

The leaking of angular-material CSS onto other divs is causing unexpected styling

I am having trouble incorporating Angular Material's md-autocomplete into my angular application. I have already customized the CSS being used in my application, but when I add the Angular Material CSS, it messes up the entire page. Even when I tried ...

htmlcssangularjs

PHP Script unable to locate results

For some reason, the script I have written is not functioning properly. Upon reviewing the code from walmart.com, I verified that name="query" is accurate. However, I am uncertain about the contents within <script></script> <html> < ...

htmlsearch

creating an HTML table from JSON data using a specific key

In this json file, I am looking to create separate tables based on the IDs provided. For example, ID: "50" should be displayed in one table, while ID: "57" should be shown in another table within the same context. { "version": "5.2", "user_type": ...

javascriptjqueryhtmljson

You may only insert a single image into a container

My goal is to display two images side by side with text centered between them. However, when I add the first image using CSS and the background property, I run into issues adding a second image as it overrides the first one. Placing the images directly in ...

htmlcssimagecss-position

The drop-down menu appears to be falling behind the 'content' div element

Whenever I try to hover over the dropdown menu, it frustratingly appears behind the content div that I painstakingly created. Despite all my efforts with z-index adjustments, the issue still persists. Below you'll find all the code for my website, but ...

javascriptjqueryhtmlcss

Trouble with HTML5 videos not functioning on Apple iOS gadgets

Having trouble playing my HTML5 videos on iOS devices, specifically iPhone 7.0 and iPad 7.0.4. Currently experiencing an issue where the iPad shows only an empty container and the iPhone displays a play button with a line through it. Any thoughts on what m ...

iosiphonehtml.htaccessvideo

Set the height of the last child element to 100% in the CSS

Seeking assistance to adjust the height of the final list item to 100% in order to match the varying height of the right-floated div. ul.menu li:last-child {height:100%} Here is an example of my current situation: http://jsfiddle.net/kvtV8/1/ Any help ...

htmlcss

Steps for eliminating the thick border around <thead> and <tfoot> elements in Bootstrap

Is there a way to remove the thick border on the <thead> and <tfoot> elements in Bootstrap 4 that seems a bit unnecessary? I found a forum post addressing this issue for Bootstrap 5, but unfortunately, the fix didn't work for me since I a ...

cssbootstrap-4

"Troubleshooting cross-domain issues with iframes in Internet Explorer

My application is built with angularjs and we offer the option to embed it on other websites. Everything works well in IE11, but when the application is iframed onto a different domain's website, it stops working. I've tried adding <meta htt ...

angularjshtmliframeinternet-explorer-11meta

Nested divs with inline formatting

On my HTML page, I have the following structure: <div id="frst"> FIRST </div> <div id="top"> <div id="mid"> <div id="bottom"> <ul class="menu"> <li>A</li> ...

csshtmlinline

The dimensions on Next.js pages exceed those of the viewport by a significant margin

I have recently encountered a perplexing issue where the dimensions of my webpage appear to be 2.7 times larger than the viewport, even when there is no content or styles applied. The strange part is that it seems as though the page has been scaled up, eve ...

javascriptcssreactjsnext.js

Displaying images on hover that were not initially incorporated into the project

I am currently developing a website where the content is not controlled by me and the incoming content is unknown, making it impossible for me to store images. My goal is to display the referenced image when a specific class is hovered over. For example: ...

jqueryhtmlimageonhover

Decimal error causing Bootstrap grid column division issue

I've been attempting to divide the Bootstrap grid column into 20 grids using the code below: <div style="width: 4.999999998%; margin-top: -27.5px; margin-left: 25px;" class="col-md-.6 col-sm-6"> <div style="height: 32.5px; ...

htmlcssbootstrap-4

Creating a Custom "Save As" Dialog in HTML5 and JavaScript for Downloading Files

I have developed a NodeJS/Express application that is capable of generating and downloading an Excel document (created using ExcelJS) when a user clicks on a button. Currently, the file gets automatically downloaded to the default download location of the ...

javascripthtmlnode.jsexpressexceljs

Is there a way to obtain the coordinates of an SVG element by simply clicking on a specific point?

I'm still learning about SVG and I'm trying to trigger an event that captures the click coordinates when clicking on the SVG. I have a few questions: Since I'm using Angular, I'm unsure if it's possible to keep my function in th ...

javascripthtmlangularsvgonclick