Youtube link coverted to embed

by aljon254

HTML

Youtube link sample : </br>
http://www.youtube.com/watch?v=w7AFRg7-hrA
</br></br> 
<input id="convertyoutube" style="width:300px;" type="text" name="convertyoutube" ><button id="covnertButton">Convert</button>
 </br>
 <div id="theMainContainer" style="display:none;">
	 <h1>Youtube Embedded code</h1> 
	 <div style="overflow:hidden;">
		 <div id="embededVid" style="float:left;" > 		 
		 </div>
		 <textarea id="embededVidText" style="float:left;margin-left:10px;width:400px;height:200px;" >		 
		 </textarea>	 
	 </div> 
	</br>
	<h1>Generated Thumnail</h1> 
	<!-- 0.jpg -->
	<h4>0.jpg<h4>
	 <div style="overflow:hidden;">
		 <div id="thumb0" style="float:left;max-width:500px;" > 		 
		 </div>
		 <input id="thumb0Text" style="float:left;margin-left:10px;width:400px;" >	
	 </div> 
	 <!-- 1.jpg -->
	 <h4>1.jpg<h4>
	 <div style="overflow:hidden;">
		 <div id="thumb1" style="float:left;" > 		 
		 </div>
		 <input id="thumb1Text" style="float:left;margin-left:10px;width:400px;" >	
	 </div> 
	 <!-- 2.jpg -->
	 <h4>2.jpg<h4>
	 <div style="overflow:hidden;">
		 <div id="thumb2" style="float:left;" > 		 
		 </div>
		 <input id="thumb2Text" style="float:left;margin-left:10px;width:400px;" >	
	 </div> 
	 <!-- 3.jpg -->
	 <h4>3.jpg<h4>
	 <div style="overflow:hidden;">
		 <div id="thumb3" style="float:left;" > 		 
		 </div>
		 <input id="thumb3Text" style="float:left;margin-left:10px;width:400px;" >	
	 </div> 
	<!-- default.jpg -->
	 <h4>default.jpg<h4>
	 <div style="overflow:hidden;">
		 <div id="thumbdefault" style="float:left;" > 		 
		 </div>
		 <input id="thumbdefaultText" style="float:left;margin-left:10px;width:400px;" >	
	 </div> 
	<!-- hqdefault.jpg -->
	<h4>hqdefault.jpg<h4>
	 <div style="overflow:hidden;">
		 <div id="thumbhqdefault" style="float:left;" > 		 
		 </div>
		 <input id="thumbhqdefaultText" style="float:left;margin-left:10px;width:400px;" >	
	 </div> 
	<!-- mqdefault.jpg -->
	<h4>mqdefault.jpg<h4>
	 <div style="overflow:hidden;">
		 <div id="thumbmqdefault"...

JavaScript

$( "#covnertButton" ).click(function() {
			//reveal the main container
			$("#theMainContainer").show();		 
			//get youtube link id
			pastedVal = $("#convertyoutube").val();	
			//remove white spaces
			pastedVal = pastedVal.replace(/\s+/g, '');
			
			//extract the id of normal youtube link ex http://www.youtube.com/watch?v=pAwqXbLk4Ww
			youtubeIdExtract = pastedVal.split('v=')[1];
			//change the format ex http://www.youtube.com/watch?v=pAwqXbLk4Ww&list=UUc0iQdQwv9PPx57mmzGMUnA&index=2
			amper = youtubeIdExtract.indexOf('&');
			if(amper != -1) {
			  youtubeIdExtract = youtubeIdExtract.substring(0, amper);
			}			

			//generate youtube embeded code
			youtubeEmbed = '<iframe width="560" height="315"  src="http://www.youtube.com/embed/' + youtubeIdExtract + '" frameborder="0" allowfullscreen></iframe>';
			$("#embededVid").html(youtubeEmbed);		
			$("#embededVidText").val(youtubeEmbed);			
			
			
			//************************//
			// generate thumbnail 
			//************************//
			
			///get youtube thumb id
			youtubeThumbId = 'http://img.youtube.com/vi/'+ youtubeIdExtract;
			
			//0.jpg
			$('#thumb0').html('<img src="' + youtubeThumbId + '/0.jpg">');			
			$('#thumb0Text').val(youtubeThumbId + '/0.jpg');			

			//1.jpg
			$('#thumb1').html('<img src="' + youtubeThumbId + '/1.jpg">');			
			$('#thumb1Text').val(youtubeThumbId + '/1.jpg');	
			
			
			//2.jpg
			$('#thumb2').html('<img src="' + youtubeThumbId + '/2.jpg">');			
			$('#thumb2Text').val(youtubeThumbId + '/2.jpg');	
			
			
			//3.jpg
			$('#thumb3').html('<img src="' + youtubeThumbId + '/3.jpg">');			
			$('#thumb3Text').val(youtubeThumbId + '/3.jpg');

			// default.jpg
			$('#thumbdefault').html('<img src="' + youtubeThumbId + '/default.jpg">');			
			$('#thumbdefaultText').val(youtubeThumbId + '/default.jpg');
			
			// hqdefault.jpg
			$('#thumbhqdefault').html('<img src="' + youtubeThumbId + '/hqdefault.jpg">');			
			$('#thumbhqdefaultText').val(youtubeThumbId +...