JSFiddle - React, Tailwind, and code Playground

HTML

<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"/>
</a>

</span>

CSS

.x1 a::before {
    color: white;
    content:"\25B6";
    opacity: 0.5;
    position: absolute;
    text-shadow: 0 3px black;
    z-index: 10;
    line-height:100%;
    font-size: 100%;
    position:absolute;
    left:50%; top:50%;
    -webkit-transform:translateX(-50%) translateY(-60%);
    transform:translateX(-50%) translateY(-50%);
}

JavaScript

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; 
}