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

Brick-themed HTML/CSS elements drift away from each other

I'm currently designing an image collage for my website and attempted to use masonry for the layout. However, when I adjust the size of the blocks, they seem to drift apart, creating large gaps between each block. Any suggestions on how to resolve thi ...

javascripthtmlcssmasonry

Tips for integrating v-virtual-scroll with v-table?

My Vuetify table is handling a large amount of data – 300 rows with 20 columns, some of which have calculated rowspans. To improve performance, I'm considering using the v-virtual-scroll component. I came across this sample code, which doesn't ...

javascripthtmlvue.jsvuetify.jsvuetifyjs3

What are some techniques for styling a field when the div id is not specified?

I need to customize a data field within a table, but I am unable to locate or identify its div ID. Here is the page source: <tbody> <tr> <td style="font-size:12px; text-align:center;" name=""> <div sty ...

javascripthtmlcss

scraping mixed content from an HTML span using Selenium and XPath

Currently, I am attempting to extract information from a span element that contains various content. <span id="span-id"> <!--starts with some whitespace--> <b>bold title</b> <br/> text here that I want to grab.... < ...

htmlseleniumselenium-webdriverxpath

Learn how to easily toggle table column text visibility with a simple click

I have a working Angular 9 application where I've implemented a custom table to showcase the data. Upon clicking on a column, it triggers a custom modal dialog. The unique feature of my setup is that multiple dialog modals can be opened simultaneously ...

javascriptcssangulartypescript

Learning how to utilize localStorage in conjunction with a color picker to modify the --var of :root

After spending an entire afternoon on my JavaScript issue as a beginner, I have a specific goal in mind: allowing the user to select and change the main color of the page. To implement this, I inserted a color picker in my HTML: <input type="color ...

javascripthtmlcss

Personalized form outlines

I'm designing a Valentine's Day theme for my website and I was wondering if it's possible to create custom form borders, like a heart shape, without having to hard-code everything. I could always insert an image where needed, but that seems ...

jqueryhtmlcss

Is there a way to calculate the total of three input values and display it within a span using either JavaScript or jQuery?

I have a unique challenge where I need to only deal with positive values as input. var input = $('[name="1"],[name="2"],[name="3"]'), input1 = $('[name="1"]'), input2 = $('[name="2"]'), input3 = $('[name=" ...

javascripthtmljquery

Determine the preceding element in a table by utilizing jQuery

I currently have an HTML table with the following content: <table class='main'> <tr id='r1' class='tbl'> <td>V1</td> </tr> <tr id='r2' class='tbl'> <td>V2& ...

jqueryhtmlhtml-table

Loading Images in Advance with jQuery, Native JavaScript, and CSS

After successfully implementing a method to hover on a small image and load an additional image to the right side of the page, I am now looking to enhance user experience by preloading images. Is there a way to preload an image using JQuery, allowing it t ...

javascriptjquerycssimagepreloading

Angular JS Unveiled: Deciphering HTML Entities

I'm looking for a solution to decode HTML entities in text using AngularJS. Here is the string I have: "&quot;12.10 On-Going Submission of &quot;&quot;Made Up&quot;&quot; Samples.&quot;" I need to find a way to decode this u ...

javascripthtmlangularjshtml-entitiesutf8-decode

How can text be concealed within an input field?

My degrees converter code is functioning well, but I have an issue. When I input a number for one temperature type, the conversion for the other two types is displayed correctly. However, if I then enter a number for another temperature type, the previous ...

javascripthtmlcss

Display text on the screen with a customized design using JavaScript's CSS styles

I need help with printing a specific page that contains some information designed in print.css. I want to print this page, including an image, with the same style. function printContent() { var divContents = document.getElementById("terms").innerH ...

javascripthtmlcss

Adjust the value based on selection

I aim to display another div when either the Full Time or Part Time option is selected. Additionally, I would like to calculate a different value for each option; if 'Part Time' is chosen, PrcA should change to PrcB. Here is the code snippet tha ...

javascripthtmlfunctionselect

Is there a way to execute a code snippet just once when focusing on a specific field?

<form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="mname">Middle name:</label> ...

javascripthtmltypescript

Is it acceptable for a video to autoplay even if it is not connected to the DOM?

Consider the following three scenarios: document.adoptNode, document.importNode, and document.createElement with assigned properties. In all cases, the video autoplay feature is activated even when it's not connected to the DOM. This behavior diffe ...

javascripthtmlvideo

"Engaging with the touchscreen inhibits the triggering of click

Within this div, I have implemented touch-action:pan-y;. Surrounding this div is an anchor tag. If you click on the div, the link will successfully redirect. However, if you swipe on the div and then click, the link won't work on the first attempt bu ...

javascriptcss

Discrepancies in Video Element Size: Mobile Versus Desktop

Why does the video element have different sizing behavior between mobile and desktop? I noticed on this website that on desktop Chrome, its width is about 35% of the browser while on iPad Chrome it's only about 10% Does anyone know why this is happen ...

csshtmlhtml5-video

Tips for Aligning a Collection of Relative Positioned Divs within a Parent Relative Positioned Div

Struggling to dynamically center a group of relative positioned divs within a parent div that is also relative positioned. The parent div has a width of 620px, while the child divs are each 200px wide. There could be 1 to 3 child divs per line, which is w ...

htmlcss

When the checkbox is not selected, the content on the page will revert back to its original state

Is there a way to dynamically change content on a page when a checkbox is checked, and revert it back when the checkbox is unchecked? I don't want to manually set each element's value to default in JavaScript and CSS. <div class="switch&q ...

javascripthtmlcsscheckboxonchange