JSFiddle - React, Tailwind, and code Playground

by Girisha Chennura

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<a class="btn" data-toggle="modal" href="#js-tvc-modal" >Launch Modal</a>

<div class="modal hide" id="js-tvc-modal">
  <div class="modal-body">
  </div>
</div>

SCSS

$tvc-modal-w: 853px;
$tvc-modal-h: 480px;

#js-tvc-modal {
    top: 50%;
    left: 50%;
    padding: 0;
    position: absolute;
    width: $tvc-modal-w;
    margin-left: -($tvc-modal-w/2);
    height: $tvc-modal-h;
    margin-top: -($tvc-modal-h/2);

    .close {
        margin: 57px 30px 0 0;
    }

    .modal-body {
        padding: 0;
        max-height: inherit;
    }
}

JavaScript

$('#js-tvc-modal').on('show', function () {
  $('div.modal-body').html('<iframe src="//www.youtube.com/embed/RTlMoqjc4HM?rel=0&amp;autoplay=1" width="853" height="480" frameborder="0" allowfullscreen=""></iframe>');  
});

$('#js-tvc-modal').on('hide', function () {
  $('div.modal-body').html('');
});