using jquery you can simple achieve it.
Html
<input id="TextBoxURL" />
<br />
<div id="iframe">
</div>
Script
<script type="text/javascript">
$(document).ready(function () {
$('#TextBoxURL').change(function () {
var youTubeUri = $('#TextBoxURL').val();
var youTubeVideoId = get_youtubeId(youTubeUri);
loadYouTubeVideo(youTubeVideoId);
});
});
function get_youtubeId(url) {
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[2].length == 11) {
return match[2];
} else {
//error
}
}
function loadYouTubeVideo(id){
$('#iframe').append("<iframe width='560' height='315' src='//www.youtube.com/embed/"+id+"' frameborder='0' allowfullscreen></iframe>");
}
</script>
I didn't include the validation part here with.
Cheers. Happy Coding..!!!