JSFiddle - React, Tailwind, and code Playground

by TCloud

HTML

<div id="button">Подгрузить iframe</div>
<div id="button2">Вставить ссылку</div>
<div class="di">
Здесь будет динамически полностью подгружаться весь iframe
<div id="iframe"></div>
</div>
<div class="di">
Это плеер куда динамически вставляется ссылка на ролик
<iframe src="" class="embed-responsive-item" id="videoStat" style="border-width:0px;" width="450" height="256"  allowfullscreen></iframe>
</div>

CSS

#button, #button2 {
    cursor: pointer;
    background: #DF314D;
    color: #fff;
    width: 150px;
    margin: 5px;
    padding: 5px 10px;
    border-radius: 3px;
    display:inline-block;
}
.di{
  background: #f0f2f5;
    color: #55677d;
    border: 1px dashed #55677d;
    width: auto;
    margin:10px;
    }

JavaScript

$('#button').on('click',function(){
  $('#iframe').html('<iframe src="https://www.youtube.com/embed/2Rjh-V6HoY0" class="embed-responsive-item" id="video" style="border-width:0px;" width="450" height="256" allow="autoplay" allowfullscreen></iframe>');
});
  
$('#button2').on('click',function(){
  $('#videoStat').attr('src','https://www.youtube.com/embed/2Rjh-V6HoY0?autoplay=1&mute=1');
});