An elusive video-time element

I have this Html code for a video-time on a youtube thumbnail:

    <div class="video-grid">
     <div class="video-preview">
      <div class="thumbnail-row">
         <img class="thumbnail" src="PHOTOS/hq720.webp"> 
        </div>
        <div class="video-time">18:37</div>```
Point is, when I tried to put  this video-time on the bottom right corner of my YouTube thumbnail, the video-time turned invisible. 
Here's the css I used for the it: 

.thumbnail-row {
margin-bottom: 12px;
position: relative;
}

.video-time {
position: absolute; /* Position the time absolutely /
background-color: rgba(0, 0, 0, 0.7); /
Semi-transparent background /
color: white; /
Text color /
padding: 2px 5px; /
Padding around the time /
font-size: 12px; /
Adjust font size /
border-radius: 3px; /
Rounded corners */
bottom: 10px;
right: 5px;
}

Hi @12345667

The position property of .video-time is placing the time on the bottom right of the viewport, not the thumbnail.

Happy coding

I didn’t see the time on the bottom right of the viewport…
But let’s say I did. How can I position it on the bottom right corner of the thumbnail?

Considering thumbnail-row is position relative and the time is meant to be on top of the image, I would expect the video-time element to be inside the thumbnail-row element. Otherwise, your video-preview element should be positioned relative.

  1. Comment out (don’t remove it) the absolute position style.

  2. Right-click the time element and use Inspect from the context menu.

  3. In the Styles pane, toggle the absolute position on again and see where it goes on the page.

Either its position is not relative to the correct parent container, or you might have a z-index issue, and it is behind the image.

Chrome devtools docs: View and change CSS


We need to see more of the code.

After I inspected the page and toggled the ‘absolute’ positioning, the video time was being displayed on the thumbnail furthest to the right instead of the one I intended. However, after reloading the page, it disappeared. I was only able to see it again when I clicked ‘inspect’ once more.

Although it would normally be inside the ‘thumbnail-row’ element, I wanted it to be positioned a few pixels from the bottom, so it would appear on top of the image.

More of the code:

 <div class="video-grid">
     <div class="video-preview">
      <div class="thumbnail-row">
         <img class="thumbnail"src="PHOTOS/hq720.webp"> 
        </div>
        <div class="video-time">18:37</div>
        <div class="video-info-grid">
        <div class="channel-picture">
          <img class="profile-picture"  src="PHOTOS/channels4_profile (1).jpg">
        </div>
        
        <div class="video-info">
          <p class="video-title">
            How to get ahead of 99% of people
              </p>
          <p class="video-author">
            Ruri Ohama
              </p>
          <p class="video-stats">
            844k views &#183; 11 months ago
          </p>
        </div>

    </div>
  </div>

Basiclly there’s just this pattern over and over, with other thumbnails.
And css:

  font-family: Roboto, Arial;
  margin-top: 0;
  margin-bottom: 0;
 }

 body {
  margin: 0;
  padding-top: 60px;
  padding-left: 80px;
 }

.thumbnail {
  width: 100%;
}

.thumbnail-row {
  margin-bottom: 12px;
  position: relative;
  

}


.video-time {
  position: absolute; /* Position the time absolutely */
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  color: white; /* Text color */
  padding: 2px 5px; /* Padding around the time */
  font-size: 12px; /* Adjust font size */
  border-radius: 3px; /* Rounded corners */
  bottom: 18px;
  right: 5px;
}


.video-info-grid {
  display: grid;
  grid-template-columns: 50px 1fr;
  column-gap: 16px;
  row-gap: 40px;

}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 15px;
  row-gap: 40px; /* Adjust this value to increase or decrease row spacing */
}```
Is it enough of the code?

Then that element is likely the closest relatively positioned element. The absolutely positioned element will be located at its offset in relation to the nearest parent with position relative, or the viewport if no such parent exists.

There is nothing stopping you from positioning the time element on top of the image with its parent as the thumbnail-row element.

Okay, but even as that, I can’t see the video-time on the thumbnail it was on, when I inspected it. I can only see it by inspecting, but it is invisible. (I tried z-index. Didn’t work)

And even when I inspect it and see where it is, it goes behind the thumbnail, instead of in fron of it.

There is nothing in the code you posted that would make the time element go behind the image when inside the thumbnail-row element.

The time element must come after the thumbnail element in the HTML if the image has any properties on it that creates a new stacking context (e.g. transform). Or the time element must have a positive z-index.


Post a complete example on something like Codepen.