How to make image thumbnail look like video with CSS

Question

I would like to draw a player's arrow on a video thumbnail to make it look like video.

The thumbnail's size is not always the same. It changes dynamically and this is what I also want to do with the arrow using css which I am not familiar with. The thumbail is appended on a span. Through css i am giving specific dimensions to span and automatically the thumbnail is adapted to it. I haven't managed to do the same with the arrow. The css code that I am using follows. The block that does not work properly is under .x1 a::before

span.x1 {
display:block;  
height:30px;
width:30px;

}
.x1 img
{
 width: 100%;
 height:100%;
}

UPDATED

.x1 a::before{
color: white;
content: "\25B6";
opacity: 0.5;
position: absolute;
text-shadow: 0 3px black;
z-index: 100;
font-size:100%;
position:absolute;
left:50%;
top:50%;  
}

UPDATED

I have embedded html in javascript like this:

span_element = $('<span>').attr(word.html).addClass('x'+ weight + " " + custom_class);
span_element.append('<a id="thumblink" href="'+ link +'" "    target="_blank"><img  src="' + thumblink +'" border="2px"/></a>');

and the html that is produced is this:

<span id="wordcloud_word_145" class="x1 cloud-links image-results" data-id="128" style="position: absolute; left: 51.2636px; top: 38.5956px;">
<a id="imagelink" target="_blank" "="" href="http://www.youtube.com/watch?v=0_YJToyOp_4">
    <img border="2px" src="https://i.ytimg.com/vi/0_YJToyOp_4/mqdefault.jpg"></img>
</a>

</span>

Thank you in advance for your help.

Could we see instead the rendered HTML, meaning the HTML made by the js? You can obtaining it by inspecting the element and selecting "Copy as HTML" — Zach Saucier, Jan 21 '14 at 18:38
Post all of your code, currently it looks like a blank page if we run your code as is e.g. http://jsfiddle.net/bDrNk/. There is no `span` element, what have you defined as `word`, `wieght` and `custom_class`? — stackErr, Jan 21 '14 at 18:53
@ZachSaucier I've posted the rendered html in my initial post and using jsfiddle of stackErr (eliminating js code and putting html code instead) the result I currently get on my browser is produced. I need the arrow that is outside the the borders of span to fit inside it. Span elements may vary in terms of width or height, which are defined by weight (see js code). Thank you. — user2008973, Jan 22 '14 at 07:29
@stackErr I've also made some changes on the css (see my initial post) but again the arrow is not always displayed at the center of the image. — user2008973, Jan 22 '14 at 07:58
This is impossible without using some javascript unless the video takes up the full page — Zach Saucier, Jan 22 '14 at 15:04
Is it possible to indicate how could i achieve this with the use of javascript? Thank you. — user2008973, Jan 22 '14 at 16:11

score 0 · Accepted Answer · edited May 23 '17 at 10:25

It is impossible to set the font size based on the container size regardless of the viewport size in pure CSS. If the container took up the whole viewport it is possible using viewport units, but that is not the case here

As a result, you have to use some javascript. The way I did it is to detect how tall/wide the container is, find the smaller value of the two, then set the font size based on a proportion of the small dimension (3/4 in my case).

I created it to be a function to you can apply it to many elements if you'd like, you just have to call it for each element and its container. If the format is always consistent based on classes, you could easily change it around to where you only have to pass the container and it would work

The code

var container = document.getElementById("wordcloud_word_145"),
    link = document.getElementById("imagelink");

setPlayButtonSize(link, container);

function setPlayButtonSize(button, target) {
    var width = target.clientWidth,
        height = target.clientHeight,
        smaller = width,
        fontSize = "100px";
    if(height < width) smaller = height;
    fontSize = (3*smaller/4) + "px";
    button.style.fontSize = fontSize; 
}

Demo

I had not made it work so far, because for some reason I cannot pass a not null link (in the context of my code). I consider your solution as correct since it does work in fiddle. I already marked it, sorry for the delay. Thank you! — user2008973, Jan 27 '14 at 12:38
Update: It works without the addition of the javascript code, just with css. I had not updated for all the classes meaning span.x2 , span.x3 etc and I had not noticed the effect. The code that should be added was the last two lines of the css block in your Demo. Thank you very much. — user2008973, Jan 28 '14 at 11:22

How to make image thumbnail look like video with CSS

1 Answers1