<body onload="text = document.getElementById('url');text.focus();" style="text-align:center;background-color:white;color:grey;">
<script>
function url(){
//taking text field value into variable
url = document.getElementById('url').value;
//checking if value is empty
if(url ==""){
//then do nothing
return 0;
}
//taking 0 to 23 characters from YouTube URL
yurl = url.substring(0,23);
//checking those 23 characters with string
if(yurl =='https://www.youtube.com' || yurl =='http://www.youtube.com/'){
//Ajax starts here
//checking if browser is internet explorer
if(navigator.appName=="Microsoft Internet Explorer"){
//creating object for Internet Explorer
obj = new ActiveXObject("Msxml2.XMLHTTP");
}else{
//creating object for Firefox and other browsers
obj=new XMLHttpRequest();
}
//opening connection passing url variable to PHP script
obj.open("GET","youtube.php?"+url,true);
obj.send();
obj.onreadystatechange=function(){
//if readystate is completed ie 4 get the PHP script
if(obj.readyState==4){
//get the Div tag
div = document.getElementById("preview");
//place the content we got from PHP script in Div tag
div.innerHTML=obj.responseText;
}}
}
else{
alert("Please enter youtube url");
}
}
</script>
<div style="margin-top:130px;">
Enter YouTube URL <input type="text" name="url" size="50" id="url" onblur="url()">
<div id="preview" style="padding-top:20px;"></div>
</div>
</body>
<?php
if(isset($_SERVER['QUERY_STRING'])){
//capture the url variable and store it in $url
$url = $_SERVER['QUERY_STRING'];
//divide the url we got into 2 parts using "=" sign
$text = explode("=",$url);
//take the second part
$value = $text[1];
//add that value to YouTube embed code
$t=<<<str
<iframe width="560" height="315" src="//www.youtube.com/embed/$value" frameborder="0" allowfullscreen></iframe>
str;
//display YouTube embed code with value
echo $t;
}
?>
<div id="main" role="main"></div>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script src="js/libs/jquery.imagesloaded.js"></script>
<script src="js/libs/jquery.lettering.js"></script> <!-- this library may not be required -->
<script src="js/libs/mustache.js"></script>
<script src="js/libs/quantize.js"></script>
<script src="js/color-thief.js"></script>
<!-- Using Mustache templating -->
<script id='template' type='text/x-mustache'>
{{#images}}
<div class="imageSection clearfix {{class}} ">
<div class="imageWrap">
<img class="targetImage" src="img/{{file}}" data-colorcount="{{colorCount}}" />
</div>
<div class="colors">
<div class="function dominantColor clearfix">
<h3>Dominant Color</h3>
<div class="swatches clearfix"></div>
</div>
<div class="function medianCutPalette clearfix">
<h3>Palette</h3>
<div class="swatches clearfix"></div>
</div>
</div>
</div>
{{/images}}
</script>
<script>
$(document).ready(function(){
// Use mustache.js templating to create layout
var imageArray = { images: [
{"file": "3.jpg"},
{"file": "4.jpg"},
{"file": "5.jpg"},
{"file": "logo1.png"},
{"file": "icon1.png", "colorCount": "4", "class": "fbIcon"}
]};
var html = Mustache.to_html($('#template').html(), imageArray);
$('#main').append(html);
// Use lettering.js to give letter by letter styling control for the h1 title
$("h1").lettering();
// Once images are loaded, loop through each one, getting dominant color
// and palette and displaying them.
$('img').imagesLoaded(function(){
$('img').each(function(index){
var imageSection = $(this).closest('.imageSection'),
swatchEl;
// Dominant Color
var dominantColor = getDominantColor(this);
swatchEl = $('<div>', {
'class': 'swatch'
}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
imageSection.find('.dominantColor .swatches').append(swatchEl);
// Palette
var colorCount = $(this).attr('data-colorcount')? $(this).data('colorcount'): 10;
var medianPalette = createPalette(this, colorCount);
var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
$.each(medianPalette, function(index, value){
swatchEl = $('<div>', {
'class': 'swatch'
}).css('background-color','rgba('+value[0]+','+value[1]+ ','+value[2]+', 1)');
medianCutPalette.append(swatchEl);
});
});
});
});
</script>
<div id="main" role="main"> </div>
Get Free Updates
Subscribe Now