preview.html

<style>
* {
  -webkit-user-select: none;
  -user-select: none;
  -webkit-user-drag: none;
  -user-drag: none;
}

@font-face {
  font-family: 'Custom_Font';
  src: local('.SFNSText-Light'), 
       local('.HelveticaNeueDeskInterface-Light'), 
       local('.LucidaGrandeUI'), 
       local('Ubuntu Light'), 
       local('Segoe UI Light'),
       local('Roboto-Light'), 
       local('DroidSans'), 
       local('Tahoma');
}

input {
    -webkit-user-select:initial;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  background-color: #F3F3F3;
  font-family: Custom_Font!important;
  font-size: 1em;
  overflow: hidden;
  overflow-x: hidden;
}
video {
    border-left: 1px dotted red;
    border-right: 1px dotted red;
}
header {
    position: absolute;
    background: white;
    height: 60px;
    font-size: 30px;
    text-align: center;
    padding: 10px 20px;
    z-index: 99;
    left: 0;
    right: 0;
    top: 0;
    border-bottom: 1px dotted red;
    overflow: hidden;
}

#btn-upload, #btn-recordings-list {
    float: right;
    height: 48px;
    margin-top: 5px;
    cursor: pointer;
}

#btn-upload {
    height: 42px;
    margin-top: 10px;
}

#btn-upload-dropdown, #btn-recordings-list-dropdown {
    display: none;
    position: absolute;
    top: 80px;
    cursor: pointer;
    right: 27px;
    background: white;
    border-left: 1px dotted red;
    border-right: 1px dotted red;
    text-align: left;
    font-size: 18px;
    z-index: 9;
}

.visible {
  display: block!important;
}

#btn-upload-dropdown div, #btn-recordings-list-dropdown div {
  padding: 5px 10px;
  border-bottom: 1px dotted red;
}

#btn-upload-dropdown div:hover, #btn-recordings-list-dropdown div:hover {
  background: #F3F3F3;
}

.btn-upload-dropdown-selected {
  background: #dad6d6!important;
}

#btn-recordings-list {
  float: left;
}

#btn-recordings-list-dropdown {
  left: 27px;
  right: auto;
  max-height: 40%;
  overflow: auto;
}

.cross-icon, .edit-icon {
    float: right;
    width: 22px;
    margin-left: 20px;
    cursor: pointer;
}

.cross-icon {
  margin-left: 15px;
}

#browser-cache .cross-icon {
    float: none;
    vertical-align: middle;
    margin: 0;
    width: 15px;
}
</style>

<title>RecordRTC Extension</title>
<link rel="manifest" href="manifest.json">
<header>
    <img id="btn-recordings-list" src="images/list-icon.png" title="List Of Recordings">
    <img id="btn-upload" src="images/upload-icon.png" title="Upload">
    
    <p style="position: absolute;right: 10%;">
      <span style="font-size: .6em; margin-left: 20px;" id="file-size" title="Size"></span>
      <span style="font-size: .6em; margin-left: 20px;" id="file-resolutions" title="Resolutions"></span>
      <span style="font-size: .6em; margin-left: 20px;" id="file-duration" title="Duration"></span>
    </p>

    <p>
      <span id="file-name" title="Recording Name"></span>
    </p>

    <span id="browser-cache" style="font-size: 17px"></span>
</header>

<div id="btn-upload-dropdown">
  <div id="btn-php-upload">Upload to <span style="color: red;">Private Server</span></div>
  <div id="btn-youtube-upload">Upload to <span style="color: red;">YouTube</span></div>
</div>

<div id="btn-recordings-list-dropdown"></div>

<section style="text-align: center;">
  <video controls disable-contextmenu cf-video-load="file"></video>
</section>

<script src="DiskStorage.js"></script>
<script src="background.common.js"></script>
<script src="preview.js"></script>