JSFiddle - React, Tailwind, and code Playground

by karan3112

HTML

<div class="container">
    
    <div class="video">
        <div class="badge"></div>
        <iframe title="YouTube video player" class="media-youtube-html5" type="text/html" width="500" height="300" src="//www.youtube.com/embed/lzQgAR_J1PI" frameborder="0"></iframe>
    </div>
</div>

CSS

.container {position: relative; width: 500px;}

	.badge {width: 100px; height: 100px; background: red; position: absolute; top: 0; right: -50px; z-index: 100;}

	.video {width: 500px;}

JavaScript

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});