JSFiddle - React, Tailwind, and code Playground

by sergeybreen

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<div class="spoiler"><div class="spoiler__btn" onclick="toggleContent(this);">Показать Видео1</div>
    <div class="spoiler__content">
   	<div class="youtube" id="fx10CSyA!YqIOGNtWy4rOQUcXUKQrRz4orozoCfNWt0TWVKeaUHU" style="width:100%; height:640px;"></div> </div></div>
	
	
	<div class="spoiler"><div class="spoiler__btn" onclick="toggleContent(this);">Показать Видео2</div>
    <div class="spoiler__content">
   	<div class="youtube" id="fx10CSyA!YqIOGNtWy4rOQUcXUKQrRz4orozoCfNWt0TWVKeaUHU" style="width:100%; height:640px;"></div> </div></div>
	
	
	<div class="spoiler"><div class="spoiler__btn" onclick="toggleContent(this);">Показать Видео3</div>
    <div class="spoiler__content">
   	<div class="youtube" id="fx10CSyA!YqIOGNtWy4rOQUcXUKQrRz4orozoCfNWt0TWVKeaUHU" style="width:100%; height:640px;" ></div> </div></div>
	
	
	<div class="spoiler"><div class="spoiler__btn" onclick="toggleContent(this);">Показать Видео4</div>
    <div class="spoiler__content">
   	<div class="youtube" id="fx10CSyA!YqIOGNtWy4rOQUcXUKQrRz4orozoCfNWt0TWVKeaUHU" style="width:100%; height:640px;"></div> </div></div>
    


  </body>
  
  
  <script>  
  'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
    if (!document.getElementsByClassName) {
        // Поддержка IE8
        var getElementsByClassName = function(node, classname) {
            var a = [];
        var re = new RegExp('(^| )'+classname+'( |$)');
            var els = node.getElementsByTagName("*");
            for(var i=0,j=els.length; i<j; i++)
                if(re.test(els[i].className))a.push(els[i]);
            return a;
        }
        var videos = getElementsByClassName(document.body,"youtube");
    } else {
        var videos = document.getElementsByClassName("youtube");
    }
 
    var nb_videos = videos.length;
    for (var i=0; i<nb_videos; i++) {
       ...

CSS

.youtube {
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: all 15000ms ease-out;
    cursor: pointer;
}
 
.youtube .play {
    background: url('../images/Play.png') no-repeat; /*здесь укажите адрес до изображения*/
    background-position: 0 -50px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    position: absolute;
    height: 100px;
    width: 100px;
    transition: none;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
 
.youtube:hover .play {
    background-position: 0 0;
}

.spoiler__content {
  max-height: 0;
  overflow: hidden;
  transition: all .2s;
}

.spoiler__content_open {
  max-height: 640px;
}