JSFiddle - React, Tailwind, and code Playground

Online Video - UI

by Hugo Carneiro

HTML

<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="widget-holder">

  <header>
    <p>Online video</p>
    <a href="#">Need help?</a>
  </header>

  <div class="settings-holder">
    <div class="image-holder">
      <img src="http://i.imgur.com/xnfnigj.png" />
    </div>

    <div class="form-group clearfix single-field">
      <div class="col-xs-4 control-label">
        <label for="video_url">Paste your video URL</label>
      </div>
      <div class="col-xs-8">
        <div class="input-group">
          <input type="url" class="form-control" id="video_url" name="video-url" placeholder="e.g. https://vimeo.com/channels/staffpicks/137643804">
          <div class="input-group-addon video-states">
            <div class="initial"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
            <div class="loading">
              <div class="streaming-video-loader">
                <div></div>
              </div>
            </div>
            <div class="success"><i class="fa fa-check" aria-hidden="true"></i></div>
            <div class="fail"><i class="fa fa-times" aria-hidden="true"></i></div>
          </div>
        </div>
        <div class="helper-holder">
          <div class="text-danger error">The link doesn’t contain a video or it is not supported.</div>
          <a id="try-stream-single" href="#">Show me an example</a>
        </div>
      </div>
    </div>

  </div>

</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
html,
body {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  background-color: #f2f6f7;
}


/*BUTTONS*/

.btn {
  border-radius: 6px;
  line-height: 44px;
  padding: 0px 15px;
  border: none;
}

.btn-default {
  color: #333;
  background-color: #e4e9eb;
  border-bottom: 2px solid #cfd3d5;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover {
  color: #333;
  background-color: #cfd3d5;
  border-color: #cfd3d5;
  outline: none;
}

.btn-primary {
  color: #FFF;
  background-color: #00abd2;
  border-bottom: 2px solid #0087a6;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:hover,
.btn-primary:active:hover {
  color: #FFF;
  background-color: #0087a6;
  border-color: #0087a6;
  outline: none;
}

.btn-danger {
  color: #FFF;
  background-color: #d9534f;
  border-bottom: 2px solid #c9302c;
}

.btn-danger:focus,
.btn-danger:active,
.btn-danger:active:focus,
.btn-danger:hover,
.btn-danger:active:hover {
  color: #FFF;
  background-color: #c9302c;
  border-color: #c9302c;
  outline: none;
}

.btn-link,
a {
  color: #00abd1;
}

header {
  display: flex;
  font-size: 1em;
  border-bottom: 1px solid #E3E9EB;
  margin-bottom: 3rem;
  padding-bottom: 1.5em;
}
header.titles {
  font-weight: bold;
}

header p {
  flex: 1;
  margin: 0 1.4rem 0 0;
}
header a {
  text-decoration: none;
}

.widget-holder {
  padding: 15px;
}

.image-holder {
  text-align: center;
}

.image-holder img {
  max-width: 100%;
}

.form-group.single-field,
.form-group.multiple-fields {
  margin-top: 30px;
}

.helper-holder {
  margin-top: 5px;
  font-size: 0.9em;
}

.helper-holder #add-multiple,
.helper-holder #add-single {
  float: right;
}

.video-states {
  width: 44px;
  text-align: center;
  padding: 0;
  line-height: 42px;
  font-size: 18px;
}

.video-states .loading,
.video-states...

JavaScript

var processingTime = 2000,
  errorProcessing = true;

$('#video_url, #video_urls').on('keyup change', function() {
  removeFinalStates();

  $('.video-states .initial').addClass('hidden');
  $('.video-states .loading').addClass('show');

  if ($(this).val().length === 0) {
    $('.video-states .initial').removeClass('hidden');
    $('.video-states .loading').removeClass('show');
  } else {
    setTimeout(changeStates, processingTime);
  }
});

$('#try-stream-single, #try-stream-multiple').on('click', function() {
  $('#video_url').val('https://vimeo.com/channels/staffpicks/137643804').trigger('change');
});

function changeStates() {
  if (errorProcessing) {
    $('.video-states .loading').removeClass('show');
    $('.video-states .fail').addClass('show');
    $('.helper-holder .error').addClass('show');
  } else {
    $('.video-states .loading').removeClass('show');
    $('.video-states .success').addClass('show');
  }
}

function removeFinalStates() {
  if ($('.video-states .fail').hasClass('show')) {
    $('.video-states .fail').removeClass('show');
    $('.helper-holder .error').removeClass('show');
  } else if ($('.video-states .success').hasClass('show')) {
    $('.video-states .success').removeClass('show');
  }
}