JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<main class="container my-3" role="main">
  <div class="row justify-content-center">
    <div class="col-8 my-2 px-0">
      <div class="input-group">
        <input type="text" class="form-control" id="url" placeholder="Хаяг">
        <span class="input-group-btn">
          <button class="btn btn-secondary text-uppercase" type="button" id="watch">Үзэх!</button>
        </span>
      </div>
    </div>
    <section class="bg-info col-8 my-2 p-3">
      <div id="video"></div>
    </section>
  </div>
</main>

CSS

:root {display: block}

JavaScript

$(function(){
	$('#watch').click( function(e){
    e.preventDefault();
    var URL = $("#url").val();
    var html = '<iframe width="100%" height="349" src="https://www.youtube.com/embed/' + URL + '?rel=0" frameborder="0" allowfullscreen ></iframe>';

    $('#video').html(html);

    return false;
  });
})