JSFiddle - React, Tailwind, and code Playground

by sulfureous

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<iframe id="frame" width="500" height="500" src="//www.youtube.com/embed/0lrrUwyTw2c?wmode=gpu" frameborder="0" allowfullscreen></iframe>

<div class="cover"></div>

<p><button>Click to swap wmode</button></p>

CSS

body {
    margin: 0;
    padding: 0;
}
.cover {
    position: absolute;
    z-index: 2;
    border-radius: 0 50px 0 0;
    top: 0;
    left: 0;
    background: #767676;
    width: 500px;
    height: 500px;
}

JavaScript

$(document).ready(function(){
  $('button').click(function(){  
    var link = document.getElementById('frame');
    var result = link.getAttribute('src').replace('wmode=gpu','wmode=transparent');
    link.setAttribute('src', result);
  });
});