JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<video controls="" muted="" autoplay preload="auto" id="testid" width="500">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
    <source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm" />
    <img src="http://dummyimage.com/1044x585/000/fff" />
</video>
<a href="http://www.google.com" class="overlay" target="_blank"></a>

CSS

#testid {top: 44px; left: 55px; position: relative}

JavaScript

$('.overlay').each(function() {
    var vid = $(this).prev('video');
    $(this).css({
        position : 'fixed',
        top      : vid.offset().top + 'px',
        left     : vid.offset().left + 'px',
        width    : vid.width() + 'px',
        height   : (vid.height() - 30) + 'px',
    });
});