SO51228653

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  
</head>

<body>

  <label for='vidURL' class='switchBtn v'>Standard Video</label>

  <label for='ytvURL' class='switchBtn y'>You Tube Video</label>
  <br>
<fieldset class='group'>
  
  <label>Test Std URL: </label>
  <input type='text' readonly value='https://ia800209.us.archive.org/24/items/WildlifeSampleVideo/Wildlife.mp4'>
  <br>
  <label>Test YT URL: </label>
  <input type='text' readonly value='https://www.youtube.com/embed/Ch5MEJk5ZCQ?enablejsapi=1'>
  <br>

  <label>Paste Url here </label>
  <input type="text" id="pasteURL" />
  
  </fieldset>

  <label>Select Video </label>
  <input type="file" id="file" value="Browse Video" accept="video/*" />
  <br>

  <label>Video Preview</label>
  <figure class="filePreview">

    <input id='vidURL' type='radio' name='switch' class='switch'>

    <video id="vid" width="560" height="0"></video>

    <input id='ytvURL' type='radio' name='switch' class='switch'>

    <iframe id="ytv" type="text/html" width="560" height="0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

  </figure>



  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
  <script src="script.js"></script>
</body>

</html>

/*
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
*/

var vid = document.getElementById('vid');

/*
var ytv;

function onYouTubeIframeAPIReady() {
  ytv = new YT.Player('ytv');
}
*/

$('.switchBtn').on('click', function(e) {
  $('.switchBtn').removeClass('act');
  $(e.target).addClass('act');
});

$('#pasteURL').on('input', function(e) {

  var videoUrl = $('#pasteURL').val().trim();
  if ($('.v').is('.act')) {
    vid.controls = true;
    vid.src = videoUrl
    vid.load();
  } else {
    vid.pause();
    vid.currentTime = 0;
    vid.controls = false;
    $('#ytv').attr('src', videoUrl);
  }
});

$("#file").on('change', function(event) {
  var fileInput = $('#file')[0];
  var fileUrl = window.URL.createObjectURL(fileInput.files[0]);
  $("#vid").attr("src", fileUrl).prop("controls", true);
});

input,
label {
  display: inline-block;
  font: inherit;
  margin: 10px 0 0 0;
}

input[type=text] {
  width: 350px;
}

.group {
  pointer-events: none;
  opacity: 0.4;
}

.switchBtn {
  width: 110px;
  height: 18px;
  margin: 15px -2px 10px -2px;
  border: 3px outset grey;
  padding: 2px 3px 0;
  cursor: pointer;
}

.switchBtn.act {
  background: tomato;
  color: #fff
}

.switchBtn.act ~ .group {
  pointer-events: auto;
  opacity: 1;
}

.switchBtn.v {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  text-align: right;
}

.switchBtn.y {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.switch {
  display: none
}

.switch:checked + * {
  height: 405px;
  transition: 1s;
}