JSFiddle - React, Tailwind, and code Playground

by Евгений

HTML

<div class="spoiler-video" data-video="http://video.sibnet.ru/shell.php?videoid=1278914" data-title="1 серия"></div>
<div class="spoiler-video" data-video="http://video.sibnet.ru/shell.php?videoid=1278915" data-title="2 серия"></div>

CSS

.spoiler-button {
font-size: 14px;
font-weight: bold;
background: #FFCA32;
text-shadow:0 1px 0 #FFE73F;
border:1px solid #F4A460;
box-shadow: 0 1px 0 rgba(255,255,255,0.4);
color: #B02C20;
text-align: center;
max-height: 300px;
padding: 5px;
}

.spoiler-video {
    text-align: center;
}

JavaScript

$('.spoiler-video').each(function () {
    
	$("<div/>", {
		"class": "spoiler-button",
		text: $(this).data('title'),
		click: function(){
            $(this).next().slideToggle();
		}
	}).appendTo($(this));
	
	$("<div/>", {
		"class": "spoiler-frame",
		html: '<iframe width="640" scrolling="no" height="384" frameborder="0" allowfullscreen="" src="' + $(this).data('video') + '"></iframe>'
	}).appendTo($(this)).slideUp();

})