2
How Can I Create CSS Rule to Show Video Duration in Screenshot
This is the effect I try to give on my thumbnails. Assign An Markup on Screen Shot displaying the duration of a video
I don’t know if I could express myself right, but I would like to know a way to position/place one of the HTML element <p>, <span> or <div> within a div Pai, in the lower right corner, so that the user is informed of the duration of the content.
See a figure below, exemplifying:
3
The secret is to leave Dad with position: relative and the child with absolute position, so the child element will be positioned relative to the parent (if the parent has the set positioning).
There are several ways to do it, one of which is to create an element to insert and position duration. In my opinion, a better alternative is to use data Attributes, so you take advantage of the element itself in which the video (or thumbnail) is, without having to fill the html with <span> unnecessary.
You can recover the value of an attribute data-alguma-coisa through the function attr() of CSS:
.video { position: relative }
.video > img { width: 100% }
.video::after {
background: rgba(0, 0, 0, .8);
color: #fff;
content: attr(data-duration);
padding: 4px 10px;
pointer-events: none;
position: absolute;
bottom: 4%;
right: 2%;
}<div class='video' data-duration='5:00'>
<img src='http://i.stack.imgur.com/OEbRf.jpg' alt=''>
<div>2
Lasting a few more minutes in front of my PC, after the response of Renan that brought me clarity, how to get the desired effect. I bring another solution just positioning the HTML element span within the div Father, giving the position of Tarja where you can insert the time of a video.
#pai p{
position:relative;
float:left;
font-size: 12pt;
font-weight: bold;
}
.filho p span{
position:absolute;
background-color: black;
color: #fff;
padding: 4px 10px;
position: absolute;
bottom: 4%;
right: 2%;
}<div id="pai" class="filho">
<p>
<span>00:00</span>
<img src="https://img.youtube.com/vi/YQHsXMglC9A/hqdefault.jpg"/>
</p>
</div>
This information (video time) in my case, I search with Javascript from a database(Array). So I just needed to style a rule to div container block level and insert/position inline element span.
You can do the same thing with data Attributes, Just change your value and this can be done with Javascript as well. The difference is that you won’t need to create an extra element in html just to display the duration of the video. But all right, if your solution was the one that best solved the situation, mark it as correct.
It is missing a "display:block" for this span to behave as block element, what seems to me more suitable for your case (and facilitates stylization , positioning and alignment of text horizontally and vertically depending on the case).
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
In which browser did it not work? I looked at the data-Attributes and attr() in the "Can I Use" and seems OK.
– Renan Gomes
If you are interested, here are some illustrative images: http://lorempixel.com - There are more parameters, but see an example of quick use, already passing the measurements in the URL: http://lorempixel.com/600/200 - I find it practical to skip the stage of choice, upload etc. (although using Mgur is safer if the service goes off the air).
– Bacco