video upload

na

by Saurabh Khemka

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<form action="https://upload.embed.ly/1/video?key=YOUR_API_KEY" method="POST" enctype="multipart/form-data" name="upload_form">
  <div id="upload-button" class="button">Upload Video</div>
  <div id="upload-input">
    <input id="video_file" name="video_file" type="file">
  </div>
</form>
<div class="url-display"></div>
<div class="embed-code"></div>
<div class="video-display"></div>
<img id="loader" src="https://i.imgur.com/s4Z4mdr.gif">

CSS

.button {
  border-style: solid;
  border-width: 0px;
  cursor: pointer;
  font-family: "museo-sans-fontspring", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: normal;
  line-height: normal;
  margin: 0 0 1.25rem;
  position: relative;
  text-decoration: none;
  text-align: center;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  display: inline-block;
  padding-top: 1rem;
  padding-right: 2rem;
  padding-bottom: 1.0625rem;
  padding-left: 2rem;
  font-size: 1rem;
  background-color: #00c7e4;
  border-color: #009fb6;
  color: #FFFFFF;
  border-radius: 3px;
  border-bottom: 1px solid #008194;
  text-transform: uppercase;
  font-weight: 500;
  transition: background-color 300ms ease-out;
}

h1 {
  font-weight: 500;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-family: "museo-sans-fontspring", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  color: #565656;
}

#upload-input {
  height: 0px;
  width: 0px;
  overflow: hidden
}

textarea {
  background-color: #DDDDDD;
  color: grey;
}

#loader {
  display: none;
}

p {
  font-family: "museo-sans-fontspring", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  color: #525252;
}

a {
  color: #00c7e4;
  text-decoration: none;
}

JavaScript

var emb_key = "YOUR_API_KEY";

$(document).ready(function() {

  // Connect the styled button with the form input. The input is hidden. This is done in order to have a custom embed button. 
  $("#upload-button").click(function(e) {
    $('#video_file').click();
  })

  // Once the video file is added, display the progress UI and submit the form for upload.
  $("#video_file").change(function(e) {
    $("#loader").css('display', "block");
    $("#progress-percent").css('display', "block");
    $("form[name='upload_form']").submit();
    e.preventDefault();
  })

  // The sumbit function makes a post request. By default this replaces the page with the response, which is the JSON response after the post request. To stay on the same page the ajax request requires some more information.
  $("form[name='upload_form'").submit(function(e) {
    e.preventDefault();
    var fd = new FormData($("form")[0]);
    $.ajax({
      url: $(this).attr('action'),
      data: fd,
      processData: false,
      contentType: false,
      crossDomain: true,
      headers: {
        'Access-Control-Allow-Origin': '*'
      },
      type: 'POST',
      success: function(data, textStatus, xhr) {
        // On receiving the response, update the UI with the embed code and URL of the video
        successText(data);

        //Query the status endpoint 
        var call = "https://upload.embed.ly/1/status?key=" + emb_key + "&video_id=" + data.video_id;

        //Poll status endpoint until video is processed
        pollForFinished(call, function(){renderIframe(data);});
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        console.log("Upload Failed for video: " + errorThrown);
      },
      xhr: function() {
        //Monitor and display the percentage uploaded
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
          if (evt.lengthComputable) {
            var percentComplete = (evt.loaded /...