JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- normal video code placed in dozens of post -->

<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/SlHHS7IC7M0?rel=0" width="640"></iframe>



<!-- how to transform the code above into this automatically, for every post, maybe in javascipt? -->

<div id="wr">
<div class="trigger open"><a href="#">Open</a></div>
<div class="cnt">
<div class="flex-video widescreen"><iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/SlHHS7IC7M0?rel=0" width="640"></iframe></div>
</div></div>

CSS

#wr {
	margin: 0px auto;
	text-align: left;
}
.trigger,.trigger a {
	display: block;
	width: 176px;
	height: 176px;
	text-indent: -999999em;
	overflow: hidden;
}
.trigger {
	background: url(http://www.cwu.edu/~lopezye/clickme.jpg) no-repeat 0px 0px;
}
.close {
	background: url(http://i.imgur.com/WIWqhts.png) no-repeat 0px 0px;
}
.cnt {
	display: none;
}
.cl {
	width: 100%;
	clear: both;
	line-height: 0px;
	font-size: 0px;
}




.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }
}

JavaScript

$(document).ready(function () {


    if ($('div.trigger')) {
        $('div.trigger').click(function (e) {
            $(this).toggleClass('open')
                .toggleClass('close')
                .next()
                .slideToggle(100);

            e.preventDefault();
        });
    }
});