JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script src="https://media-editor.cloudinary.com/all.js"></script>

  <body>
    <div id="app"></div>
    <button id="openButton">Show/Hide Widget</button>
    <div id="placeholder" style="width: 500px; height: 500px;"></div>
    <script>
      var widget = cloudinary.mediaEditor();
      widget.update({
    publicIds: [{
      publicId: 'Videos/beta',
      resourceType: 'video',
    }],
    cloudName: "shirly-dam",
    "video": {
    "steps": [
      "trim"
    ],
    
  }},

      widget.show(),
      console.log(widget.getVersion()),

      document
        .getElementById("openButton")
        .addEventListener("click", function() {
          widget.show();
        }),

      //localStorage.setItem('env', 'staging')

       widget.on("export", function(data) {
       document.getElementById("placeholder").innerHTML =
       "<video controls src='" + data.assets[0].secureUrl + "'/>";

       console.log("URL: ", data.assets[0].url);
       console.log("Secure URL", data.assets[0].secureUrl);
       console.log("Download URL", data.assets[0].downloadUrl);
      }));
    </script>
  </body>
</html>