JSFiddle - React, Tailwind, and code Playground

by aquadk

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<span data-toggle="modal" data-target="#embed-code">
 <a href="javascript:void(0)" data-toggle="tooltip" title="Embed Code"class="btn btn-xs btn-default">Generate</a></span>



<div id="embed-code" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 class="modal-title">Generate Shortcode</h3>
      </div>
      <div class="modal-body" id="modalbody">
        <div class="block">
          <div class="form-group">
            <label>Width</label>
            <input type="number" id="widht_input" name="width" class="form-control" placeholder="Enter width..">
          </div>

          <div class="form-group embedcode" style="display: none">
            <label for="example-nf-password">Embed Code</label>
            <textarea id="EmbedCode" class="form-control" rows="6" placeholder="">
              <iframe id="frame" style="width: 300px;height:315px"  src="https://www.youtube.com/embed/_AZqZBzjI2I" frameborder="0" allowfullscreen></iframe>
            </textarea>
          </div>
          <div style="display:none">
            <iframe id="frame" style="width: 300px;height:315px"  src="https://www.youtube.com/embed/_AZqZBzjI2I" frameborder="0" allowfullscreen></iframe>
          </div>
          <div class="form-group form-actions">
            <button type="button" class="generate_code btn btn-sm btn-primary"><i class="fa fa-user"></i> Generate</button>

          </div>

        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

$("#widht_input").bind('keyup', function() {
  $("#frame").width($("#widht_input").val());
})

$('.generate_code').click(function() {

  $('.embedcode').show();
  $('#EmbedCode').val($("#frame")[0].outerHTML);
})