JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    
    <div class="video">
        <iframe title="YouTube video player" class="media-youtube-html5" type="text/html" width="500" height="300" src="http://www.youtube.com/embed/9W82sMSMJJg?hd=1" wmode="opaque" frameborder="0"></iframe>
    </div>
    <div class="badge"></div>
</div>

CSS

.container {
    position: relative;
    width: 500px;
}
.badge {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute; 
    top: 0;
}
.video {
    width: 500px;
    position: relative;
}
iframe { position: absolute; top: 0;  }