Youtube

by Marcos vini

HTML

<form id="acesso" method="post">     
<input type="text" name="url"  id="url">
<br> 
<input type="button" id='gerar' value="Gerar">  

    <div id="resultado"></div>
</form>

CSS

::focus,::active{
  outline:none;
}

body{
      font: 16px/1 Helvetica,Arial,sans-serif;
}
.panel {
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    max-width:450px;
}
input[type='text']:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-color: #19b9e7 #17b0dc !important;
    outline: none;
    -webkit-transition: linear 0.5s;
    transition: linear 0.5s;
    -moz-transition: linear 0.5s;
    -ms-transition: linear 0.5s;
    -o-transition: linear 0.5s;
}
input[type='text']{
      position: relative;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    border-radius: 0px !important;
    color: #999 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
}
input[type='button']{
      float: left;
      display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select:...

JavaScript

"use strict"; //um modo mais rigoroso de interpretação da linguagem, que proíbe certas práticas que sempre foram permitidas reduzir a chance de existirem no código bugs

const YOUTUBE = {	//const define um constante e lhe atribui o valor nao pode er alterado caso aconteca da um error.
gerar: function(){
new Promise((Resolve, Reject) => {	
let sanitize = (str) => decodeURIComponent(str.substring(0, str.indexOf('\\\\')));

let x = new XMLHttpRequest(); //let o x so e exibindo dentro do corpo da function fora da error
var resultado = document.getElementById("resultado");	
var url = document.getElementById("url").value;
x.open('GET','http://guiltless-bail.000webhostapp.com/youtube.php?url='+url);
x.send();
x.onreadystatechange = function() {
	if (x.readyState == 2 && x.status==200) {
resultado.innerHTML = "Aguarde...";		
}
if (x.readyState == 3 && x.status==200) {
resultado.innerHTML = "Recebendo Dados...";	
}
if (x.readyState == 0 && x.status==200) {
resultado.innerHTML = "Erro Pagina";	
}
},
x.onload = function() {
		var r = x.responseText;

          


if (x.readyState == 4 && x.status == 200) {
  r = r.substring(r.indexOf('url_encoded_fmt_stream_map'), r.length);
  

	
		
            r = r.substring(r.indexOf('url=http') + 4, r.length);
            r = r.split('url=');
			
				
				
					
			
Resolve({"high": sanitize(r[0]),"medium": sanitize(r[1]),"lower": sanitize(r[2]).replace(new RegExp('quality=medium', 'gi'), 'quality=lower')})


}else{
	Reject("Error load videos");
}
}
}).then(c => document.querySelector('#resultado').innerHTML= '<a target="_black" download="my_filename" href="'+c.high+'"><div class="download high">Download <span class="details">Qualidade<span class="size">Alta</span></span></div></a><a target="_black" href="'+c.medium+'"><div class="download medium">Download <span class="details">Qualidade<span class="size">Media</span></span></div></a><a target="_black" href="'+c.lower+'"><div class="download lower">Download <span...