JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
<a data-flickr-embed="true"  href="https://www.flickr.com/photos/138041208@N02/27214754585/in/dateposted-public/" title="Test video"><img src="https://c2.staticflickr.com/8/7776/27214754585_9ecf29781c_b.jpg" width="1024" height="576" alt="Test video"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
</div>

CSS

button {
  background-color: red;
  position:absolute;
  z-index:1000;
}
.parent {
  width: 400px;
  position: relative;
  padding-top: 56.2%;
  height: 0;
}
.parent iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

@keyframes nodeInserted {  
	from { opacity: 0.99; }
	to { opacity: 1; }  
}

.parent iframe {
    animation-duration: 0.001s;
    animation-name: nodeInserted;
}

JavaScript

var insertListener = function(event){
	if (event.animationName == "nodeInserted") {
    $(event.target).contents().find('.flickr-embed-photo').attr('style','');
    $(event.target).contents().find('.slide-video video').css({
    	'width': '100%',
      'height': 'auto',
      'vertical-align': 'top'
    });
	}
}

document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari