JSFiddle - React, Tailwind, and code Playground

HTML

<br/><input id="btn" type="button" value="move"></input>
<div class="parent">
<div class="div1">
    <div class="video">
        <iframe width="300" height="200" src="http://www.youtube.com/embed/98LHnO0xiMY" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
</div>

CSS

.div1 {
    position: absolute;
    top: 50px;
    width: 300px;
    height: 200px;
    border: solid 3px green;
}

.div2 {
    position: absolute;
    top: 50px;
    left: 325px;
    width: 300px;
    height: 200px;
    border: solid 3px red;
}

JavaScript

$(function(){
    $('#btn').on('click', function () {
        try {
            var div1 = $('.div1')
            //var video = div1.find('.video')[0];
            //var div2 = $('<div class="div2"></div>');
            //$(video).appendTo(div2);
            //div2.appendTo($('.parent'));
            div1.removeClass('div1');
            div1.addClass('div2')
        }
        catch (e) {
            alert(e.message);
        }
    });
});